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

javascript jquery file-upload file-type

2022-08-30 04:19:21

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

答案 1

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

因此，为了表面上检查文件是否具有正确的扩展名，您可以执行如下操作：

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

答案 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 = '';
    }
});

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