Question

如何验证用户是否选择了要上传的文件？

编辑：碰撞

Answer 1

检查value属性：

在jQuery中（因为你的标签提到它）：

$('#fileInput').val()

或者在vanilla JavaScript中：

document.getElementById('myFileInput').value

Answer 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;
}

Answer 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>

Answer 4

至少在Firefox中，DOM检查器告诉我文件输入元素有一个名为files的属性。你应该能够查看它的长度。

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

Answer 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>

Answer 6

简单而强大的方式（动态验证）

将格式放置在“图像/ *”之类的数组中

var upload=document.getElementById("upload");
var array=["video/mp4","image/png"];
upload.accept=array;
upload.addEventListener("change",()=>{

console.log(upload.value)
})

<input type="file" id="upload" >

如何使用Javascript / jquery验证文件上载字段

6 个答案: