如何使用jQuery限制上传文件类型？

Question

我希望使用jQuery来限制文件上传字段只能上传jpg/jpeg，png和gif格式的文件。我已经在后端使用PHP进行了检查。我已经通过一个JavaScript函数运行了提交按钮，所以我只需要知道如何在提交之前检查文件类型或弹出警告。

- Anthony

Answer 1

您可以像获取其他字段一样获取文件字段的值。但是，您不能更改它。

因此，为了表面上检查文件是否具有正确的扩展名，您可以这样做：

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

- Paolo Bergantino

---

并将其绑定到您的表单上：$("#my_upload_form").bind("submit", function() { // 上面的检查 }); - 321X

您可以使用$('#file_field').change(function(){// above check});。 - makki

$("#my_upload_form").bind("submit", function() { // above check }); 现在应该使用 $("#my_upload_form").submit(function() { // above check }); 进行绑定，详情请见 http://api.jquery.com/submit/。你也可以使用 $("#my_upload_form").submit(function(e) { // above check e.preventDefault(); }); 阻止表单提交。 - Liam

@Jeyhun：单词“superficially”被加粗是有原因的。这并不能阻止恶意用户通过更改文件类型上传不需要的文件，但它可以在99%的情况下起到作用。如果需要更强大的检查功能，则必须在服务器端进行检查。 - Paolo Bergantino

值得强调的是，这不是一种百分之百可靠的方法。最后，请确保您的后端检查文件的前几个字节，以确保它实际上是您想要的文件类型。还有一件事需要考虑，在Linux和OSX中，您可以拥有没有扩展名的文件，但实际上是您想要的类型，所以这也会失败。 - chris

Answer 2

只针对这个任务不需要插件。从其他几个脚本中把它拼凑在一起：

$('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 = '';
    }
});

这里的技巧是在选择有效的文件类型之前，将上传按钮设置为不可用状态。

- Christian

---

抱歉，兄弟，这是一个错误的正则表达式。文件名中可以包含点。 "giel.asd.aaaaa.jpg.png".match(/.(.+)$/) - Tim Kretschmer

Answer 3

如果您正在使用文件字段，则前端放置“accept”属性非常方便。

示例：

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

几个重要的注意事项：

• accept 属性在 Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 中得到支持。
• 不同浏览器的文件浏览器对文件扩展名显示的文本有所不同。

- dhruvpatel

---

比使用JQuery好得多。 - Christopher Grigg

Answer 4

您可以使用jQuery的验证插件：http://docs.jquery.com/Plugins/Validation。它恰好有一个accept（）规则，可以完全满足您的需求：http: //docs.jquery.com/Plugins/Validation/Methods/accept#extension。请注意，控制文件扩展名并不是绝对安全的，因为其与文件的MIME类型无关。因此，您可能会有一个扩展名为.png的Word文档和一个扩展名为.doc的有效png图像。所以千万别忘了在服务器端进行更多的控制 ;)

- Julian Aubourg

---

你能提供一个在IE11上如何使用http://plugins.krajee.com/file-input#option-allowedfileextensions的例子吗？ - shorif2000

Answer 5

如果您不想检查用户所谓的扩展名，而是更倾向于MIME类型，那么这只需要不到一行代码：

<input type="file" id="userfile" accept="image/*|video/*" required />

- Leo

---

只是为了更方便地从具有不同扩展名的文件夹中选择图像，而不是得到他所需的内容。如您在此处所见-> http://imageshack.us/a/img20/8451/switchzz.jpg - bernte

由于它不会影响IE<10，也不会影响其他代码，因此它是对你试图限制的内容的有效限制。 - Leo

Answer 6

在我的情况下，我使用了以下代码：

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

- vanessen

Answer 7

我尝试编写可运行的代码示例，测试后一切都正常。

这是代码：

HTML：

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

Javascript:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}

- Avtandil Kavrelishvili

Answer 8

这段代码可以正常运行，但唯一的问题是如果文件格式与指定选项不同，则会显示警告消息，但它会显示文件名，而应该忽略它。

$('#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; }
});

- Abhi

Answer 9

如果您正在处理多个（html 5）文件上传，我采用了顶部建议的评论并进行了一些修改：

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

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

        f = files[i];

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

        }
    }

- Jason Roner

Answer 10

这个例子只允许上传PNG格式的图片。 HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS (JavaScript)

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });

- NoWar

---

请问您能否建议如何限制图像大小。例如，不应接受10mb大小的图像。 - PDSSandeep

@PDSSandeep 请查看此链接 https://dev59.com/ZWw15IYBdhLWcg3wfb7i - NoWar