在 JQuery 文件上传演示中限制文件类型

Posted 2023-03-22

【中文标题】在 JQuery 文件上传演示中限制文件类型

【英文标题】：Restricting file types in JQuery File upload demo

【发布时间】：2012-08-31 11:37:54

【问题描述】：

我正在使用 JQuery file upload demo 进行下一个 Codeigniter 项目。谁能告诉我如何实现以下目标：

将上传文件类型限制为 .zip 和 .rar 限制文件大小 清除已上传文件列表（JQuery文件上传插件显示已上传文件列表）

帮助赞赏！！

【问题讨论】：

确保您也在服务器端执行所有这些限制/验证。

【参考方案1】：

你现在可能有很多解决方案，但是我想为 jquery 上传器使用 BASIC 插件，即没有任何其他脚本.. 由于某种原因 maxFileSize/fileTypes 选项不起作用 - 但这是毫无疑问的由于我缺乏阅读文档！

无论如何，对我来说，它就像执行以下操作一样快：

    add: function (e, data) 
        var goUpload = true;
        var uploadFile = data.files[0];
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) 
            common.notifyError('You must select an image file only');
            goUpload = false;
        
        if (uploadFile.size > 2000000)  // 2mb
            common.notifyError('Please upload a smaller image, max size is 2 MB');
            goUpload = false;
        
        if (goUpload == true) 
            data.submit();
        
    ,

因此，只需使用 ADD 选项仅允许正则表达式中的图像类型，并检查（在我的情况下）文件大小最大为 2mb。

相当基本，我再次确定 maxFileSize 选项有效，只是我只包括基本插件脚本 jquery.fileupload.js

编辑 我应该在我的情况下添加我只上传一个文件（个人资料图片），因此 data.files[0].. 你当然可以遍历文件集合。

【讨论】：

终于！我一直在寻找一个有效的例子。谢谢 :)

add 按文件运行。因此data.submit 仅指一个文件。

如果我没有得到这个我不会更开心..:)

非常有帮助.. thz

太好了，我刚刚在 common.notifyError('You must select an image file only') 之前添加了 alert("You must select an image file only") 来通知用户

【参考方案2】：

在 jquery.fileupload-ui.js 中编辑这部分：

   $.widget('blueimp.fileupload', $.blueimp.fileupload, 

    options: 
        // The maximum allowed file size:
        maxFileSize: 100000000,
        // The minimum allowed file size:
        minFileSize: undefined,
        // The regular expression for allowed file types, matches
        // against either file type or file name:
        acceptFileTypes:  /(zip)|(rar)$/i,
        ----------------------------------------------------------------

要清除已上传文件的列表 - 如果您不需要该功能，请从 main.js 中删除 $.getJSON 调用。

【参考方案3】：

根据官方文档；

$('#file_upload').fileUploadUIX(
    maxFileSize: 5000000, // Maximum File Size in Bytes - 5 MB
    minFileSize: 100000, // Minimum File Size in Bytes - 100 KB
    acceptFileTypes: /(zip)|(rar)$/i  // Allowed File Types
);

【参考方案4】：

另一种方法如下。

 $('#upload').fileupload( 
       change: function (e, data)  
                if (!(/\.(jpg|jpeg|png|pdf)$/i).test(data.files[0].name)) 
                    alert('Not Allowed');
                    return false;
                
         
 );

【参考方案5】：

试着看看这一行：

 process: [
            /*
                
                    action: 'load',
                    fileTypes: /^image\/(gif|jpeg|png)$/,
                    maxFileSize: 20000000 // 20MB
                ,
                
                    action: 'resize',
                    maxWidth: 1920,
                    maxHeight: 1200,
                    minWidth: 800,
                    minHeight: 600
                ,

在 jquery.fileupload-fp.js 中