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

Question

我正在使用JQuery文件上传演示作为我的下一个Codeigniter项目的组件。有人能告诉我如何实现以下功能：

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

感谢帮助！

- Faisal Memon

---

请确保在服务器端执行所有这些限制/验证。 - Kevin B

Answer 1

你现在可能已经有很多解决方案了，但我想使用基本的jQuery上传插件（即不带任何其他脚本）。由于某种原因，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

编辑 我应该补充说明，在我的情况下，我只上传一个文件（个人资料图片），因此数据.files [0]..您当然可以迭代文件集合。

- Dav.id

---

终于！我一直在寻找一个可行的例子。谢谢 :) - william

add 每个文件都会运行。因此，data.submit 只涉及一个文件。 - Hengjie

如果我得不到这个，我会更加快乐.. :) - shajin

非常有帮助..谢谢 - Cataclysm

太好了，我在 common.notifyError('You must select an image file only') 前面加入了 alert("您必须仅选择图像文件") 来通知用户。 - Alaa Sadik

Answer 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调用。

- Potheek

Answer 3

另一种实现方式如下所示：

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

- Shanaka Rathnayaka

Answer 4

根据官方文档；

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

- Alfred

Answer 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中

- Satya