Как проверить поле загрузки файла с помощью Javascript / JQuery - PullRequest
Новая
       12

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

18 голосов
/ 07 мая 2009

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

Редактировать: столкнулся

Ответы [ 5 ]

24 голосов
/ 07 мая 2009

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

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

$('#fileInput').val()

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

document.getElementById('myFileInput').value
19 голосов
/ 08 января 2013

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

Попробуйте это: 

<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;
}
1 голос
/ 27 июля 2017

Основываясь на решении 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>
0 голосов
/ 09 января 2012

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

<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>
0 голосов
/ 07 мая 2009

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

document.getElementById('myFileInput').files.length
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...