javascript - blueimp 文件上传多次触发添加事件

Question

我正在尝试构建将在我的网站项目中使用的上传模块。我选择了 blueimp 文件上传，因为它提供了所有配置选项。

想法是有按钮，它将显示带有上传模块的模态窗口。
我的(几乎)工作原型(prototype)在这里可用:http://jsfiddle.net/Misiu/4Th3u/

我现在想要的是限制用户可以选择的文件数量和文件大小。因为我使用的是非 ui 版本，所以我无法使用 maxNumberOfFiles 和 maxFileSize 选项。

我已经创建了 add 回调:

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

    console.log('add event');      
    $.each(data.originalFiles, function(index,file) {
        console.log(file.name);

        if (file.size && file.size > 1024 * 1024 * 5) {
            uploadErrors.push('File "' + file.name + '" is too large');
        }
    })

    if (uploadErrors.length > 0) {
        alert(uploadErrors.join("\n"));
    } else {
        var tpl = $('<li class="working"><input type="text" value="0" data-width="36" data-height="36"' +' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
        tpl.find('p').text(data.files[0].name)
            .append('<i>' + formatFileSize(data.files[0].size) + '</i>');
        data.context = tpl.appendTo(ul);
        tpl.find('input').knob();
        tpl.find('span').click(function () {
        if (tpl.hasClass('working')) {
            jqXHR.abort();
        }
        tpl.fadeOut(function () {
            tpl.remove();
        });
    });
    var jqXHR = data.submit();
    }
}

问题是 add 被多次触发，如果我选择 2 个文件，我会得到 2 个事件。
这是选择两个文件后控制台的外观:

add event
file1.gif
file2.gif
add event
file1.gif
file2.gif 

我想限制文件数量和文件大小，但由于这个错误，这并不容易。

Answer 1

我无法回答您的具体问题，但我必须解决在上传前验证所选文件的问题。您可以在非 ui 版本中使用 maxFileSize 属性，您只需要自己向 UI 显示任何错误。您还需要确保页面上也引用了处理和验证 JS 文件。

这是我的解决方案，遗憾的是删除了进度内容，但保留了图像预览!不过，修改模板内容以满足您的需要对您来说应该不会太难。

我的表单如下所示:

<form id="FileUpload" action="/Expense/UploadReceipt" method="POST" enctype="multipart/form-data">
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
    <div class="row fileupload-buttonbar">
        <div class="col-md-12">

            <input type="file" name="files[]" multiple class="btn btn-default">

            <button type="reset" class="btn btn-danger cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel All</span>
            </button>
            <button type="submit" class="btn btn-success start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start upload</span>
            </button>
        </div>
    </div>
    <!-- The loading indicator is shown during image processing -->
    <div class="fileupload-loading"></div>
    <br>
    <!-- The table listing the files available for upload/download -->
    <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>

我的文件上传初始化看起来像这样:

$('#FileUpload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: uploadUrl + data,
        dataType: 'json',
        headers: {
            Accept: "application/json"
        },
        accept: 'application/json',
        maxFileSize: 5000000, //5mb
        sequentialUploads: true,
        resizeMaxWidth: 1920,
        resizeMaxHeight: 1200,
        acceptFileTypes: /(.|\/)(gif|jpe?g|png|pdf)$/i,
        uploadTemplateId: null,
        downloadTemplateId: null,
        uploadTemplate: function (o) {
            var rows = $();
            $.each(o.files, function (index, file) {
                var row = $('<tr class="template-upload fade">' +
                    '<td class="preview"><span class="fade"></span></td>' +
                    '<td class="name"><strong class="error text-danger"></strong></td>' +
                    '<td class="size"></td>' +
                    (file.error ? '<td class="error" colspan="1"></td>' :
                            '<td class="actions-col">' +
                            '<button class="btn btn-danger cancel"><i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel</span></button> ' +
                            '<button class="btn btn-success start"><i class="glyphicon glyphicon-upload"></i> <span>Start</span></button>' +
                            ' </td>') + '</tr>');
                row.find('.name').text(file.name);
                row.find('.size').text(o.formatFileSize(file.size));
                if (file.error) {
                    row.find('.error').text(
                        locale.fileupload.errors[file.error] || file.error
                    );
                }
                rows = rows.add(row);
            });
            return rows;
        },
        downloadTemplate: function (o) {
            var rows = $();
            $.each(o.files, function (index, file) {

                var row = $('<tr class="template-download fade">' +
                    (file.error ? '<td></td><td class="name"></td>' +
                        '<td class="size"></td><td class="error" colspan="2"></td>' :
                            '<td class="preview"></td>' +
                                '<td class="name"><a></a></td>' +
                                '<td class="size"></td><td colspan="2"></td>'
                    ));
                row.find('.size').text(o.formatFileSize(file.size));
                if (file.error) {
                    //row.find('.name').text(file.name);
                    //row.find('.error').text(
                    //    locale.fileupload.errors[file.error] || file.error
                    //);
                } else {
                    row.find('.name a').text(file.name);
                    var extension = file.name.substring(file.name.length - 3, file.name.length);
                    if (extension == "pdf") {
                        row.find('.name a').attr('target', '_blank');
                    } else {
                        row.find('.name a').addClass("fancyImageLink");
                    }
                    if (file.thumbnail_url) {
                        row.find('.preview').append('<a><img></a>')
                            .find('img').prop('src', file.thumbnail_url);
                        row.find('a').prop('rel', 'gallery');
                    }
                    row.find('a').prop('href', file.url);
                    row.find('.delete')
                        .attr('data-type', file.delete_type)
                        .attr('data-url', file.delete_url);
                }
                rows = rows.add(row);
            });
            return rows;
        }
    });

错误处理在这里完成:

$('#FileUpload').bind('fileuploadprocessalways', function (e, data) {
            var currentFile = data.files[data.index];
            if (data.files.error && currentFile.error) {
                $('.files tr').eq(data.index).find(".start").prop('disabled', true);
                if (currentFile.error == "File is too large") {
                    $('.files tr').eq(data.index).find(".size").addClass('field-validation-error');
                } else {
                    $('.files tr').eq(data.index).find(".name").addClass('field-validation-error');
                }

                $("#ReceiptUploadAlert p").text(currentFile.name + ": " + currentFile.error);
                $("#ReceiptUploadAlert").show();
                return;
            }
        });

希望这对您有所帮助。