blueimp 文件上传插件中的 maxFileSize 和 acceptFileTypes 不起作用.为什么? [英] maxFileSize and acceptFileTypes in blueimp file upload plugin do not work. Why?

问题描述

我使用 Blueimp jQuery 文件上传插件上传文件.

I'm using Blueimp jQuery file upload plugin for upload files.

我上传没有问题，但选项 maxFileSize 和 acceptFileTypes 不起作用.

I had no problem in uploading but the option maxFileSize and acceptFileTypes do not work.

这是我的代码:

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

推荐答案

遇到了同样的问题，blueimp 的人说maxFileSize 和 acceptFileTypes 仅受 UI 版本支持"并提供了一个(断开的)链接来合并 _validate 和 _hasError 方法.

Had the same problem, and the blueimp guy says "maxFileSize and acceptFileTypes are only supported by the UI version" and has provided a (broken) link to incorporate the _validate and _hasError methods.

因此，在不知道如何在不弄乱脚本的情况下合并这些方法的情况下，我编写了这个小函数.它似乎对我有用.

So without knowing how to incorporate those methods without messing up the script I wrote this little function. It seems to work for me.

只需添加这个

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("
"));
        } else {
            data.submit();
        }
},

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

at the start of the .fileupload options as shown in your code here

$(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("
"));
                } 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 版本.

You'll notice I added a filesize function in there as well because that will also only work in the UI version.

更新以解决@lopsid 建议的过去问题:添加了data.originalFiles[0]['type'].length 和data.originalFiles[0]['size'].length 以确保它们存在并且在测试错误之前首先不为空.如果它们不存在，则不会显示任何错误，它只会依赖您的服务器端错误测试.

Updated to get past issue suggested by @lopsided: Added data.originalFiles[0]['type'].length and data.originalFiles[0]['size'].length in the queries to make sure they exist and are not empty first before testing for errors. If they don't exist, no error will be shown and it will only rely on your server side error testing.

这篇关于blueimp 文件上传插件中的 maxFileSize 和 acceptFileTypes 不起作用.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！