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

Question

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

Answer 1

您可以获得与任何其他字段相同的文件字段的值。但是，您无法更改它。

因此，要表面检查文件的扩展名是否正确，可以执行以下操作：

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();

if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {

    alert('invalid extension!');

}

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 = '';

    }

});

这里的窍门是将上传按钮设置为禁用，除非并且直到选择了有效的文件类型。