Как проверить область загрузки файла с помощью Javascript/jquery

Как я могу проверить, выбрал ли пользователь файл для загрузки?

Изменить: bumped

Ответ 1

Проверьте свойство value:

В jQuery (поскольку ваш тег упоминает его):

$('#fileInput').val()

Или в ванильном JavaScript:

document.getElementById('myFileInput').value

Ответ 2

Моя функция проверяет, выбрал ли пользователь файл или нет, и вы также можете проверить, хотите ли вы разрешить это расширение файла или нет.

Попробуйте следующее:

<input type="file" name="fileUpload" onchange="validate_fileupload(this.value);">

function validate_fileupload(fileName)
{
    var allowed_extensions = new Array("jpg","png","gif");
    var file_extension = fileName.split('.').pop().toLowerCase(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename.

    for(var i = 0; i <= allowed_extensions.length; i++)
    {
        if(allowed_extensions[i]==file_extension)
        {
            return true; // valid file extension
        }
    }

    return false;
}

Ответ 3

Основываясь на решении Ravinders, этот код останавливает отправку формы. Возможно, было бы разумно проверить расширение на стороне сервера. Таким образом, вы не получаете хакеров, загружающих все, что захотите.

<script>
var valid = false;

function validate_fileupload(input_element)
{
    var el = document.getElementById("feedback");
    var fileName = input_element.value;
    var allowed_extensions = new Array("jpg","png","gif");
    var file_extension = fileName.split('.').pop(); 
    for(var i = 0; i < allowed_extensions.length; i++)
    {
        if(allowed_extensions[i]==file_extension)
        {
            valid = true; // valid file extension
            el.innerHTML = "";
            return;
        }
    }
    el.innerHTML="Invalid file";
    valid = false;
}

function valid_form()
{
    return valid;
}
</script>

<div id="feedback" style="color: red;"></div>
<form method="post" action="/image" enctype="multipart/form-data">
  <input type="file" name="fileName" accept=".jpg,.png,.bmp" onchange="validate_fileupload(this);"/>
  <input id="uploadsubmit" type="submit" value="UPLOAD IMAGE" onclick="return valid_form();"/>
</form>

Ответ 4

В Firefox, по крайней мере, инспектор DOM сообщает мне, что элементы ввода файла имеют свойство files. Вы должны проверить его длину.

document.getElementById('myFileInput').files.length

Ответ 5

Я получил это с какого-то форума. Надеюсь, это будет полезно для вас.

<script type="text/javascript">
 function validateFileExtension(fld) {
    if(!/(\.bmp|\.gif|\.jpg|\.jpeg)$/i.test(fld.value)) {
        alert("Invalid image file type.");      
        fld.form.reset();
        fld.focus();        
        return false;   
    }   
    return true; 
 } </script> </head>
 <body> <form ...etc...  onsubmit="return
 validateFileExtension(this.fileField)"> <p> <input type="file"
 name="fileField"  onchange="return validateFileExtension(this)">
 <input type="submit" value="Submit"> </p> </form> </body>