Question

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

想法是有按钮，将显示带上传模块的模态窗口我的（几乎）工作原型可以在这里找到：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

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

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;
            }
        });

希望这会以某种方式帮助你。

Answer 2

在 var jqXHR = data.submit();

添加return false;，这会阻止上传提交，直到您点击开始上传

来自Using the submit callback option

的参考资料

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

2 个答案: