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

时间:2012-09-06 15:40:53

标签: jquery codeigniter file-upload blueimp

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

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

帮助赞赏!!

5 个答案:

答案 0 :(得分:66)

你现在可能有很多解决方案,但是我想为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] ..你当然可以迭代文件集合。

答案 1 :(得分:7)

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

答案 2 :(得分: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
});

答案 3 :(得分:1)

另一种方法如下。

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

答案 4 :(得分:-2)

试着看看这一行:

 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