blocks|key|1388985|text|您可以使用jQuery的验证插件：http://docs.jquery.com/Plugins/Validation|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1388986|它恰好有一个accept()规则，它可以执行您需要的操作：http://docs.jquery.com/Plugins/Validation/Methods/accept#extension|1388987|请注意，控制文件扩展名不是防弹的，因为它与文件的mimetype没有任何关系。所以你可以有一个是word文档的.png和一个完全有效的png图像的.doc。因此，不要忘记在服务器端创建更多的控件;)|1388988|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Plugins/Validation|1|http://docs.jquery.com/Plugins/Validation/Methods/accept#extension^0|H|15|0|0|T|1U|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

<p>You could use the validation plugin for jQuery:
<a href="http://docs.jquery.com/Plugins/Validation" rel="noreferrer">http://docs.jquery.com/Plugins/Validation</a></p>

<p>It happens to have an accept() rule that does exactly what you need:
<a href="http://docs.jquery.com/Plugins/Validation/Methods/accept#extension" rel="noreferrer">http://docs.jquery.com/Plugins/Validation/Methods/accept#extension</a></p>

<p>Note that controlling file extension is not bullet proof since it is in no way related to the mimetype of the file. So you could have a .png that's a word document and a .doc that's a perfectly valid png image. So don't forget to make more controls server-side ;)</p>


blocks|key|1603957|text|这个任务不需要插件。这是从其他几个脚本拼凑而成的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1603958|$('INPUT[type="file"]').change(function+()+{
++++var+ext+=+this.value.match(/\.(.%2B)$/)[1];
++++switch+(ext)+{
++++++++case+'jpg':
++++++++case+'jpeg':
++++++++case+'png':
++++++++case+'gif':
++++++++++++$('#uploadButton').attr('disabled',+false);
++++++++++++break;
++++++++default:
++++++++++++alert('This+is+not+an+allowed+file+type.');
++++++++++++this.value+=+'';
++++}
});|code-block|syntax|javascript|1603959|这里的诀窍是将upload按钮设置为disabled，除非选择了有效的文件类型。|1603960|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>No plugin necessary for just this task. Cobbled this together from a couple other scripts:</p>

<pre><code>$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});
</code></pre>

<p>The trick here is to set the upload button to disabled unless and until a valid file type is selected.</p>


blocks|key|1389060|text|不想检查MIME而不是用户所说的任何扩展？如果是这样，那么它就不到一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1389061|<input+type="file"+id="userfile"+accept="image/*%7Cvideo/*"+required+/>|code-block|syntax|javascript|1389062|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Don't want to check rather on MIME than on whatever extention the user is lying?
If so then it's less than one line:</p>

<pre><code>&lt;input type="file" id="userfile" accept="image/*|video/*" required /&gt;
</code></pre>


blocks|key|1604012|text|在我的例子中，我使用了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1604013|++++if+(!(/\.(gif%7Cjpg%7Cjpeg%7Ctiff%7Cpng)$/i).test(fileName))+{++++++++++++++
++++alert('You+must+select+an+image+file+only');+++++++++++++++
++++}|code-block|syntax|javascript|1604014|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>for my case i used the following codes : </p>

<pre><code>    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }
</code></pre>


blocks|key|1389109|text|function+validateFileExtensions(){
++++++++var+validFileExtensions+=+["jpg",+"jpeg",+"gif",+"png"];
++++++++var+fileErrors+=+new+Array();

++++++++$(+"input:file").each(function(){
++++++++++++var+file+=+$(this).value;
++++++++++++var+ext+=+file.split('.').pop();
++++++++++++if(+$.inArray(+ext,+validFileExtensions+)+==+-1)+{
++++++++++++++++fileErrors.push(file);
++++++++++++}
++++++++});

++++++++if(+fileErrors.length+>+0+){
++++++++++++var+errorContainer+=+$("#validation-errors");
++++++++++++for(var+i=0;+i+<+fileErrors.length;+i%2B%2B){
++++++++++++++++errorContainer.append('<label+for="title"+class="error">*+File:'%2B+file+%2B'+do+not+have+a+valid+format!</label>');
++++++++++++}
++++++++++++return+false;
++++++++}
++++++++return+true;
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1389110|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length &gt; 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i &lt; fileErrors.length; i++){
                errorContainer.append('&lt;label for="title" class="error"&gt;* File:'+ file +' do not have a valid format!&lt;/label&gt;');
            }
            return false;
        }
        return true;
    }
</code></pre>


blocks|key|1389126|text|<form+enctype="multipart/form-data">
+++<input+name="file"+type="file"+/>
+++<input+type="submit"+value="Upload"+/>
</form>
<script>
$('input[type=file]').change(function(){
++++var+file+=+this.files[0];
++++name+=+file.name;
++++size+=+file.size;
++++type+=+file.type;
++++//your+validation
});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1389127|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;form enctype="multipart/form-data"&gt;
   &lt;input name="file" type="file" /&gt;
   &lt;input type="submit" value="Upload" /&gt;
&lt;/form&gt;
&lt;script&gt;
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
&lt;/script&gt;
</code></pre>


blocks|key|1389182|text|如果您正在处理多个(html+5)文件上传，我采用了最受欢迎的建议注释，并对其进行了一些修改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1389183|++++var+files+=+$('#file1')[0].files;
++++var+len+=+$('#file1').get(0).files.length;

++++for+(var+i+=+0;+i+<+len;+i%2B%2B)+{

++++++++f+=+files[i];

++++++++var+ext+=+f.name.split('.').pop().toLowerCase();
++++++++if+($.inArray(ext,+['gif',+'png',+'jpg',+'jpeg'])+==+-1)+{
++++++++++++alert('invalid+extension!');

++++++++}
++++}|code-block|syntax|javascript|1389184|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you're dealing with multiple (html 5) file uploads, I took the top suggested comment and modified it a little:</p>

<pre><code>    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i &lt; len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }
</code></pre>


blocks|key|1389231|text|下面是一段简单的javascript验证代码，在验证之后，它将清除输入文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1389232|<input+type="file"+id="image"+accept="image/*"+onChange="validate(this.value)"/>

function+validate(file)+{
++++var+ext+=+file.split(".");
++++ext+=+ext[ext.length-1].toLowerCase();++++++
++++var+arrayExtensions+=+["jpg"+,+"jpeg",+"png",+"bmp",+"gif"];

++++if+(arrayExtensions.lastIndexOf(ext)+==+-1)+{
++++++++alert("Wrong+extension+type.");
++++++++$("#image").val("");
++++}
}|code-block|syntax|javascript|1389233|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is a simple code for javascript validation, and after it validates it will clean the input file.</p>

<pre><code>&lt;input type="file" id="image" accept="image/*" onChange="validate(this.value)"/&gt;

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}
</code></pre>


blocks|key|1389293|text|这段代码运行良好，但唯一的问题是，如果文件格式不是指定的选项，它会显示一条警告消息，但它会显示应该忽略的文件名。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1389294|$('#ff2').change(
++++++++++++++++function+()+{
++++++++++++++++++++var+fileExtension+=+['jpeg',+'jpg',+'pdf'];
++++++++++++++++++++if+($.inArray($(this).val().split('.').pop().toLowerCase(),+fileExtension)+==+-1)+{
++++++++++++++++++++++++alert("Only+'.jpeg','.jpg','.pdf'+formats+are+allowed.");
++++++++++++++++++++++++return+false;+}
});|code-block|syntax|javascript|1389295|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This code works fine, but the only issue is if the file format is other than specified options, it shows an alert message but it displays the file name while it should be neglecting it.</p>

<pre><code>$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});
</code></pre>


blocks|key|1389310|text|++++$("input[name='btnsubmit']").attr('disabled',+true);
++++$('input[name="filphoto"]').change(function+()+{
++++var+ext+=+this.value.match(/\.(.%2B)$/)[1];
++++switch+(ext)+
++++{
++++case+'jpg':
++++case+'jpeg':
++++case+'png':
++++case+'bmp':
++++++++$("input[name='btnsubmit']").attr('disabled',+false);
++++break;
++++default:
++++++++alert('This+is+not+an+allowed+file+type.');
++++++++$("input[name='btnsubmit']").attr('disabled',+true);
++++++++this.value+=+'';|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1389311|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';
</code></pre>


<p>I would like to have jQuery limit a file upload field to only jpg/jpeg, png, and gif. I am doing backend checking with <code>PHP</code> already. I am running my submit button through a <code>JavaScript</code> function already so I really just need to know how to check for the file types before submit or alert.</p>


How to have jQuery restrict file types on upload?

服务器

jQuery

我想让jQuery限制一个文件上传域仅为jpg/jpeg，png和gif。我已经在用PHP做后端检查了。我已经通过一个JavaScript函数运行了我的提交按钮，所以我真的只需要知道如何在提交或警报之前检查文件类型。

问如何让jQuery在上传时限制文件类型？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让jQuery在上传时限制文件类型？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让jQuery在上传时限制文件类型？
EN