如何使用JavaScript/jquery验证文件上传字段

u5i3ibmn 于 12个月前发布在 jQuery

关注(0)|答案(7)|浏览(140)

如何验证用户是否选择了要上传的文件？
编辑：颠簸

jquery

来源：https://stackoverflow.com/questions/833012/how-to-validate-a-file-upload-field-using-javascript-jquery

7条答案

按热度按时间

sg24os4d1#

检查value属性：
在jQuery中（因为你的标签提到了它）：

$('#fileInput').val()

字符串
或者在普通的JavaScript中：

document.getElementById('myFileInput').value

型

赞(0）回复(0）举报 12个月前

insrf1ej2#

我的功能将检查用户是否选择了文件或没有，你也可以检查是否要允许该文件扩展名或没有。
试试这个：

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

字符串

赞(0）回复(0）举报 12个月前

ar7v8xwq3#

在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）回复(0）举报 12个月前

ifmq2ha24#

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

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

字符串

赞(0）回复(0）举报 12个月前

3df52oht5#

这是我从一个论坛上得到的，希望对你有用。

<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）回复(0）举报 12个月前

sxpgvts36#

简单而强大的方式（动态验证）
将格式放在数组中，如“image/*”

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

console.log(upload.value)
})

个字符

赞(0）回复(0）举报 12个月前

dba5bblo7#

**验证输入的最佳方式，**如果无效，则清空输入。因此，无需在表单提交中再次验证...函数validate_fileupload（obj）{ var fileName=obj.value; var allowed_extensions = new Array（“pdf”）; var file_extension = fileName.split（'.'）.pop（）.到小写（）;// split函数将文件名按点号拆分（.），和pop函数将弹出数组中的最后一个元素，这也将为您提供扩展名。如果没有扩展名，则它将返回输入文件名。

for(var i = 0; i <= allowed_extensions.length; i++)
    {
        if(allowed_extensions[i]==file_extension)
        {
            return true; // valid file extension
        }
    }
    Swal.fire({
        title: "error",
        text: 'PDF ONLY',
        icon: "error"
    });
    obj.value='';
    return false;
}

<input onchange="validate_fileupload(this);" type="file" class="form-control" name="referral_file"
                                    id="pharmacy_referral_file">

字符串

赞(0）回复(0）举报 12个月前

我来回答

如何使用JavaScript/jquery验证文件上传字段

7条答案

相关问题

热门标签

最新问答