blueimp文件上传插件中的maxFileSize和acceptFileTypes不起作用。为什么？

85

我正在使用Blueimp jQuery文件上传插件来上传文件。

我在上传但选择没有问题maxFileSize，并acceptFileTypes没有工作。

这是我的代码：

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                    .appendTo('#div_files');
            });
        },
        fail: function (e, data) {
            $.each(data.messages, function (index, error) {
                $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                    .appendTo('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});
javascript  jquery  file-upload  blueimp  jquery-file-upload 
— 约伯
source
您好，我正在尝试为文件上传实现此代码，但收到错误消息“ Upload file error”：上传的字节数超出文件大小。请您指出原因是什么？
— 杰·马哈里扬
2
@JayMaharjan您确定已正确配置maxFileSize吗？
— YoBre'2
1
在php.ini中进行正确的配置后，现在我可以上传大文件了。谢谢您的帮助。:)
— Jay Maharjan '16
就我而言，gif已被调整大小并转换为png，然后对gif的筛选显然失败了。奇怪的是，一旦我弄清楚发生了什么，它就开始自动工作，我仔细检查了我是否对库做了什么，但是什么都没做，我所放的只是控制台日志，我删除了该日志后仍然可以使用。发布，这样可能会对某人有所帮助。
— Zia Ul Rehman Mughal

Answers:

135

遇到了同样的问题，blueimp家伙说“ UI版本仅支持maxFileSize和acceptFileTypes ”，并提供了一个（断开的）链接来合并_validate和_hasError方法。

因此，在不知道如何合并这些方法而又不弄乱脚本的情况下，我编写了这个小函数。它似乎为我工作。

只需添加此

add: function(e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Filesize is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.submit();
        }
},

在.fileupload选项的开头，如此处的代码所示

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                    uploadErrors.push('Not an accepted file type');
                }
                if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
        },
        dataType: 'json',
        autoUpload: false,
        // acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        // maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                .appendTo('#div_files');
            });
        },
        fail: function (e, data) {
            $.each(data.messages, function (index, error) {
                $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                .appendTo('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});

您会注意到我也在其中添加了文件大小功能，因为它也仅在UI版本中有效。

已更新，以解决@lopside建议的过去问题：在查询中添加了data.originalFiles[0]['type'].length并data.originalFiles[0]['size'].length在查询中确保它们存在并且在测试错误之前不为空。如果它们不存在，则不会显示任何错误，并且仅依赖于服务器端的错误测试。

— 保罗·麦格
source
这真的很有用。但是，应注意，data.originalFiles[0]['type']从不支持File API的浏览器上载时为空。我的Android手机上就是这种情况。我要做的是在此值不可用时传递它，然后回退到服务器端mime类型验证。否则，您永远不会越过acceptFileTypes.test界限
— 偏离
@lopside很奇怪，我在Android手机上获得了data.originalFiles [0] ['type']和['size']的值，它通过了两项测试。我的手机实际上遇到了麻烦，似乎一切正常，但没有上传文件。没有其他问题，只有Android。
— PaulMrG 2013年
8
我认为条件'data.originalFiles [0] ['size']。length'已过时，因此它始终返回false。
— kkocabiyik 2013年
5
使用data.files [0] [ '尺寸']和data.files [0] [ '型']
— 圣何塞
2
使用不带'length'的数据（data.originalFiles [0] ['size'] && data.originalFiles [0] ['size']> 500000）吗？'true'：'false'工作正常，但我想知道是否遗漏了任何情况1. data.originalFiles [0] ['size']吗？'true'：'false'（1）对于值0，null，未定义返回false
— Ganesh Arulanantham
49

您应该包括jquery.fileupload-process.js和jquery.fileupload-validate.js以使其正常工作。

— lboullo0
source
4
这似乎是更好的答案。;）
— thasmo 2014年
8
加载脚本的顺序对于使错误消息出现很重要：tmpl.min.js> jquery.ui.widget.js> jquery.iframe-transport.js> jquery.fileupload.js> jquery.fileupload-ui.js> jquery.fileupload-process.js> jquery.fileupload-validate.js
— a11r 2014年
3
问题是一样的，请您提供一些工作示例？
— Vlatko
3
我遇到同样的问题。我的JS文件按照所描述的确切顺序进行，但是我仍然能够上传根据regex既不被接受的文件，又大大超过了文件大小的限制。我正在使用最新的FileUpload版本9.10.5和jQuery 1.11.1
— Pablo先生
3
即使以正确的顺序包含了所有脚本，这对我也不起作用。
— BadHorsie 2015年
10

如先前答案中所建议，我们需要包含两个其他文件-jquery.fileupload-process.js然后，jquery.fileupload-validate.js由于添加文件时我需要执行一些其他ajax调用，因此我正在订阅该fileuploadadd事件以执行这些调用。关于这种用法，该插件的作者提出了以下建议

请在这里看看：https : //github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

通过绑定（或jQuery 1.7+的on方法）方法添加其他事件侦听器是通过jQuery File Upload UI版本保留回调设置的首选选项。

另外，您也可以在自己的回调中简单地开始处理，如下所示：https : //github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

通过将两个建议的选项结合使用，以下代码对我而言非常有效

$fileInput.fileupload({
    url: 'upload_url',
    type: 'POST',
    dataType: 'json',
    autoUpload: false,
    disableValidation: false,
    maxFileSize: 1024 * 1024,
    messages: {
        maxFileSize: 'File exceeds maximum allowed size of 1MB',
    }
});

$fileInput.on('fileuploadadd', function(evt, data) {
    var $this = $(this);
    var validation = data.process(function () {
        return $this.fileupload('process', data);
    });

    validation.done(function() {
        makeAjaxCall('some_other_url', { fileName: data.files[0].name, fileSizeInBytes: data.files[0].size })
            .done(function(resp) {
                data.formData = data.formData || {};
                data.formData.someData = resp.SomeData;
                data.submit();
        });
    });
    validation.fail(function(data) {
        console.log('Upload error: ' + data.files[0].error);
    });
});
— 阿米斯·乔治（Amith George）
source
1
阿米斯（Amith），我尝试了此问题，并收到以下错误消息：Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process'
— TheVillageIdiot 2014年
1
它几乎总是意味着.fileupload()在适当的时间没有调用它。如果不看代码，几乎无法诊断。我建议打开一个新问题并发布相关代码，也许以jsfiddle的形式发布。
— Amith George
@TheVillageIdiot您是否正在尝试在$ fileInput.fileupload声明中建立'fileuploadadd'的逻辑？当我尝试将Amith的示例折叠在这样的东西中时，我遇到了一个类似的错误：$('#fileupload').fileupload({ blah : blah, blah : blah, }) $fileInput.on('fileuploadadd', function(evt, data) { var $this = $(this); var validation = data.process(function () { return $this.fileupload('process', data); }); ... 当我想到它时很明显，但是我试图在还没有完成声明的东西中定义逻辑。
— jdhurst
我收到此错误：未捕获的ReferenceError：makeAjaxCall
— mukhtar
8

这在Firefox中对我有用

$('#fileupload').fileupload({

    dataType: 'json',
    //acceptFileTypes: /(\.|\/)(xml|pdf)$/i,
    //maxFileSize: 15000000,

    add: function (e, data) {
        var uploadErrors = [];

        var acceptFileTypes = /\/(pdf|xml)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('File type not accepted');
        }

        console.log(data.originalFiles[0]['size']) ;
        if (data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Filesize too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        }

    },
    done: function (e, data) {
        data.context.text('Success!.');
    }
});
— nasatome
source
3
欢迎使用Stack Overflow！您能用英语重写这个答案吗？我知道自动翻译有时可能很难说出来，但是英语是我们在这里使用的唯一（非编程）语言。
— 流行
15
请注意，您不必是一个狡猾的语言学家，就能弄清楚nasatome在说“这对我有用：在Firefox中是正确的”。上载错误为“文件大小太大”。我是澳大利亚人，我长大后会说英语，但我认为人们会说某种英语。“英语是我们在这里使用的唯一语言”是不正确的。这里的人使用许多不同的语言。但是，本网站的政策是用英语提问和回答。
— Tim Ogilvy
3

打开名为“ jquery.fileupload-ui.js”的文件，您将看到如下代码：

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

    options: {
        // By default, files added to the widget are uploaded as soon
        // as the user clicks on the start buttons. To enable automatic
        // uploads, set the following option to true:
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        autoUpload: false,
        // The ID of the upload template:
        uploadTemplateId: 'template-upload',
        // The ID of the download template:
        downloadTemplateId: 'template-download',
        。。。。

只需添加一行代码---新属性“ acceptFileTypes”，如下所示：

 options: {
        // By default, files added to the widget are uploaded as soon
        // as the user clicks on the start buttons. To enable automatic
        // uploads, set the following option to true:
        **acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,**
        autoUpload: false,
        // The ID of the upload template:
        uploadTemplateId: 'template-upload',
        // The ID of the download template:
        downloadTemplateId: 'template-d

现在您会看到一切正常！〜您只是将属性放在错误的位置。

— 段
source
如果可以的话，修改插件/库的核心代码是一个坏主意。
— BadHorsie 2015年
3

如果您已按照正确的顺序导入了所有插件JS，但是仍然遇到问题，则似乎指定您自己的“添加”处理程序会从* -validate.js插件中使该nerfs正常运行。通过调用data.process（）关闭所有验证。因此，要解决此问题，只需在“添加”事件处理程序中执行以下操作：

$('#whatever').fileupload({
...
add: function(e, data) {
   var $this = $(this);
   data.process(function() {
      return $this.fileupload('process', data);
   }).done(function(){
      //do success stuff
      data.submit(); <-- fire off the upload to the server
   }).fail(function() {
      alert(data.files[0].error);
   });
}
...
});
— bigwig87
source
解决了我的问题
— fezfox
2

已检查/有效的示例：

  • 多个文件输入
  • 一个或多个文件上传-$.grep()从数组中删除有错误的文件
  • image 和 audio格式
  • 字符串中的动态文件类型 new RegExp()

注意：acceptFileTypes.test()-检查MIME类型，ADIO文件中像.mp3这将是audio/mpeg-不但extenstion。对于所有blueimp选项：https : //github.com/blueimp/jQuery-File-Upload/wiki/Options

$('input[type="file"]').each(function(i){

    // .form_files is my div/section of form for input file and progressbar
    var $progressbar = $(this).parents('.form_files:first').find('.progress-bar:first');

    var $image_format = 'jpg|jpeg|jpe|png|gif';
    var $audio_format = 'mp3|mpeg';
    var $all_formats = $image_format + '|' + $audio_format;

    var $image_size = 2;
    var $audio_size = 10;
    var mb = 1048576;

    $(this).fileupload({
        // ...
        singleFileUploads: false,   // << send all together, not single
        // ...
        add: function (e, data) {

            // array with all indexes of files with errors
            var error_uploads_indexes = [];

            // when add file - each file
            $.each(data.files, function(index, file) {

                // array for all errors
                var uploadErrors = [];


                // validate all formats first
                if($all_formats){

                    // check all formats first - before size
                    var acceptFileTypes = "(\.|\/)(" + $all_formats + ")$";
                    acceptFileTypes = new RegExp(acceptFileTypes, "i");

                    // when wrong format
                    if(data.files[index]['type'].length && !acceptFileTypes.test(data.files[index]['type'])) {
                        uploadErrors.push('Not an accepted file type');

                    }else{

                        // default size is image_size
                        var $my_size = $image_size;

                            // check audio format
                            var acceptFileTypes = "(\.|\/)(" + $audio_format + ")$";
                            acceptFileTypes = new RegExp(acceptFileTypes, "i");

                            // alert(data.files[index]['type']);
                            // alert(acceptFileTypes.test('audio/mpeg'));

                            // if is audio then size is audio_size
                            if(data.files[index]['type'].length && acceptFileTypes.test(data.files[index]['type'])) {
                                $my_size = $audio_size;
                            }

                        // check size
                        if(data.files[index]['size'] > $my_size * mb) {
                            uploadErrors.push('Filesize is too big');
                        };
                    };

                }; // << all_formats

                // when errors
                if(uploadErrors.length > 0) {
                    //  alert(uploadErrors.join("\n"));

                    // mark index of error file
                    error_uploads_indexes.push(index);
                    // alert error
                    alert(uploadErrors.join("\n"));

                };

            }); // << each


            // remove indexes (files) with error
            data.files = $.grep( data.files, function( n, i ) {
                return $.inArray(i, error_uploads_indexes) ==-1;
            });


            // if are files to upload
            if(data.files.length){
                // upload by ajax
                var jqXHR = data.submit().done(function (result, textStatus, jqXHR) {
                        //...
                     alert('done!') ;
                        // ...
                });
            } // 

        }, // << add
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $progressbar.css(
                'width',
                progress + '%'
                );
        }
    }); // << file_upload

    //          
}); // << each input file
— 拉古纳网页设计
source
1

只是添加事件的事件处理程序的示例。假设启用了singleFileUploads选项（默认设置）。阅读更多jQuery File Upload文档如何与add / fileuploadadd事件绑定。在循环内，您可以使用vars this或file。获取size属性的示例：this ['size']或file.size。

    /**
     * Handles Add event
     */
    base.eventAdd = function(e, data) {

        var errs = [];
        var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;
        var maxFileSize = 5000000;

        // Validate file
        $.each(data.files, function(index, file) {
            if (file.type.length && !acceptFileTypes.test(file.type)) {
                errs.push('Selected file "' + file.name + '" is not alloawed. Invalid file type.');
            }
            if (this['size'] > maxFileSize) {
                errs.push('Selected file "' + file.name + '" is too big, ' + parseInt(file.size / 1024 / 1024) + 'M.. File should be smaller than ' + parseInt(maxFileSize / 1024 / 1024) + 'M.');
            }
        });

        // Output errors or submit data
        if (errs.length > 0) {
            alert('An error occured. ' + errs.join(" "));
        } else {
            data.submit();
        }
    };
— DAH
source
1

这在chrome中对我有用，jquery.fileupload.js版本是5.42.3

     add: function(e, data) {
        var uploadErrors = [];
        var ext = data.originalFiles[0].name.split('.').pop().toLowerCase();
        if($.inArray(ext, ['odt','docx']) == -1) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0].size > (2*1024*1024)) {//2 MB
            uploadErrors.push('Filesize is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.submit();
        }
    },
— 拉杰德拉·索拉特（Rajendra Thorat）
source
1
谢谢。也适用于9.21。
— geca
1 
.fileupload({
    add: function (e, data) { 
        var attachmentValue = 3 * 1000 * 1024;
        var totalNoOfFiles = data.originalFiles.length;
        for (i = 0; i < data.originalFiles.length; i++) {
            if (data.originalFiles[i]['size'] > attachmentValue) {
                $attachmentsList.find('.uploading').remove();
                $attachmentMessage.append("<li>" + 'Uploaded bytes exceeded the file size' + "</li>");
                $attachmentMessage.show().fadeOut(10000, function () {
                    $attachmentMessage.html('');
                });
                data.originalFiles.splice(i, 1);
            }
        }
        if (data.files[0]) {
            $attachmentsList
           .prepend('<li class="uploading" class="clearfix loading-content">' + data.files[0].name + '</li>');
        }
        data.submit();                    
    }
— Vaibhav M Nalwad
source
1

如果有人在寻找服务器支持的常用格式

3g2|3gp|3gp2|3gpp|aac|aaf|aca|accdb|accde|accdt|acx|adt|adts|afm|ai|aif|aifc|aiff|appcache|application|art|asd|asf|asi|asm|asr|asx|atom|au|avi|axs|bas|bcpio|bin|bmp|c|cab|calx|cat|cdf|chm|class|clp|cmx|cnf|cod|cpio|cpp|crd|crl|crt|csh|css|csv|cur|dcr|deploy|der|dib|dir|disco|dll|dllconfig|dlm|doc|docm|docx|dot|dotm|dotx|dsp|dtd|dvi|dvr-ms|dwf|dwp|dxr|eml|emz|eot|eps|esd|etx|evy|exe|execonfig|fdf|fif|fla|flr|flv|gif|gtar|gz|h|hdf|hdml|hhc|hhk|hhp|hlp|hqx|hta|htc|htm|html|htt|hxt|ico|ics|ief|iii|inf|ins|isp|IVF|jar|java|jck|jcz|jfif|jpb|jpe|jpeg|jpg|js|json|jsonld|jsx|latex|less|lit|lpk|lsf|lsx|lzh|m13|m14|m1v|m2ts|m3u|m4a|m4v|man|manifest|map|mdb|mdp|me|mht|mhtml|mid|midi|mix|mmf|mno|mny|mov|movie|mp2|mp3|mp4|mp4v|mpa|mpe|mpeg|mpg|mpp|mpv2|ms|msi|mso|mvb|mvc|nc|nsc|nws|ocx|oda|odc|ods|oga|ogg|ogv|one|onea|onepkg|onetmp|onetoc|onetoc2|osdx|otf|p10|p12|p7b|p7c|p7m|p7r|p7s|pbm|pcx|pcz|pdf|pfb|pfm|pfx|pgm|pko|pma|pmc|pml|pmr|pmw|png|pnm|pnz|pot|potm|potx|ppam|ppm|pps|ppsm|ppsx|ppt|pptm|pptx|prf|prm|prx|ps|psd|psm|psp|pub|qt|qtl|qxd|ra|ram|rar|ras|rf|rgb|rm|rmi|roff|rpm|rtf|rtx|scd|sct|sea|setpay|setreg|sgml|sh|shar|sit|sldm|sldx|smd|smi|smx|smz|snd|snp|spc|spl|spx|src|ssm|sst|stl|sv4cpio|sv4crc|svg|svgz|swf|t|tar|tcl|tex|texi|texinfo|tgz|thmx|thn|tif|tiff|toc|tr|trm|ts|tsv|ttf|tts|txt|u32|uls|ustar|vbs|vcf|vcs|vdx|vml|vsd|vss|vst|vsto|vsw|vsx|vtx|wav|wax|wbmp|wcm|wdb|webm|wks|wm|wma|wmd|wmf|wml|wmlc|wmls|wmlsc|wmp|wmv|wmx|wmz|woff|woff2|wps|wri|wrl|wrz|wsdl|wtv|wvx|x|xaf|xaml|xap|xbap|xbm|xdr|xht|xhtml|xla|xlam|xlc|xlm|xls|xlsb|xlsm|xlsx|xlt|xltm|xltx|xlw|xml|xof|xpm|xps|xsd|xsf|xsl|xslt|xsn|xtp|xwd|z|zip
— 阿伦·普拉萨德（Arun Prasad ES）
source
0

您还可以使用其他功能，例如：

    function checkFileType(filename, typeRegEx) {
        if (filename.length < 4 || typeRegEx.length < 1) return false;
        var filenameParts = filename.split('.');
        if (filenameParts.length < 2) return false;
        var fileExtension = filenameParts[filenameParts.length - 1];
        return typeRegEx.test('.' + fileExtension);
    }
— 开发人员10214
source
0

您应该包括jquery.fileupload-process.js和jquery.fileupload-validate.js以使其正常工作。

然后...

$(this).fileupload({
    // ...
    processfail: function (e, data) {
        data.files.forEach(function(file){
            if (file.error) {
                self.$errorMessage.html(file.error);
                return false;
            }
        });
    },
//...
}

验证失败后，将启动processfail回调。

— 丹尼尔桑80
source
0
  • 您也可以使用文件扩展名检查文件类型。

  • 更简单的方法是在add内部执行以下操作：

    add : function (e,data){
   var extension = data.originalFiles[0].name.substr( 
   (data.originalFiles[0].name.lastIndexOf('.') +1) );
            switch(extension){
                case 'csv':
                case 'xls':
                case 'xlsx':
                    data.url = <Your URL>; 
                    data.submit();
                break;
                default:
                    alert("File type not accepted");
                break;
            }
  }
— Shreelakshmi Iyer
source
0

如果您有多个文件，则可以使用循环来验证每种文件格式，如下所示

add: function(e, data) {
        data.url = 'xx/';
        var uploadErrors = [];
         var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        console.log(data.originalFiles);
        for (var i = 0; i < data.originalFiles.length; i++) {
            if(data.originalFiles[i]['type'].length && !acceptFileTypes.test(data.originalFiles[i]['type'])) {
                    uploadErrors.push('Not an accepted file type');
                    data.originalFiles
                }
                if(data.originalFiles[i]['size'].length && data.originalFiles[i]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {

                      alert(uploadErrors.join("\n"));
                }
        }
        data.submit();
      },
— Manish S
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.