Question

我有一个blueimp文件上传，其中包含添加，完成和进度回调。我在选择文件后显示文件上传的进度（我知道它在IE9及以下版本中不起作用，但没关系。）文件上传完成后，文件会显示在列表中。

在Chrome和Firefox中，我可以上传另一个文件，而上一个文件仍在上传。上传的文件将添加到列表中。但是，在IE9中，只有第一个文件被添加到列表中，其他文件仍在进行中。调用add并且服务器端代码被命中x次，这意味着文件被上传。当我尝试同时上传文件时，如何在IE9中仅执行一次“完成”？

以下是示例HTML代码：

<form action="Upload/UploadFiles" enctype="multipart/form-data">
    <input class="file-upload" type="file" name="attachments" multiple="multiple" />
</form>

和jQuery：

var     fileUpload = $('.file-upload'),
        form = fileUpload.closest('form'),
        fuTrigger = $('<span class="file-upload-trigger">Attach File</span>');

fileUpload.wrap('<div class="file-upload-container">');

var fuContainer = fileUpload.closest('.file-upload-container');
fuContainer.append(fuTrigger);

fileUpload.fileupload({
    maxChunkSize: 1000000000,
    add: function (e, data) {
        var filesContainer = $('.files-container');
        if (!(filesContainer.length > 0)) {
            filesContainer = $('<ul class="files-container"></ul>');
            filesContainer.insertAfter(form);
        }

        //add the progress bar
        var progressBarContainer = $('<li class="progress-bar-container"></li>'),
            progressBar = $('<div class="progress-bar"></div>'),
            loading = $('<span class="loading"></span>'),
            progressLabel = $('<span class="file-name-label"></span>'),
            fileName = data.files[0].name;

        progressLabel.text(fileName);
        progressBarContainer.append(loading).append(progressBar).append(progressLabel);
        filesContainer.append(progressBarContainer);

        var jqXHR = data.submit();

        //add a cancel upload button
        var btnCancelUpload = $('<button class="btn-cancel-upload"></button>');
        btnCancelUpload.text('Cancel').click(function (evt) {
            evt.preventDefault();
            jqXHR.abort();
            progressBarContainer.remove();
        });
        progressBarContainer.append(btnCancelUpload);
    },
    done: function(e, data) {
        var fileName = data.files[0].name,
            progressBarContainer = $('.file-name-label:contains(' + fileName + ')').closest('.progress-bar-container'),
            fileLabelContainer = $('<li></li>'),
            fileLabel = $('<label></label>'),
            fileLabelTextbox = $('<input type="text" class="txt-file-label" />'),
            btnDeleteFile = $('<button class="btn-delete-file"></button>');

        fileLabel.text('File Label').appendTo(fileLabelContainer);
        fileLabelContainer.append(fileLabelTextbox).append('<span class="uploaded-file-name">' + fileName + '</span>').append(btnDeleteFile);
        fileLabelContainer.insertAfter(progressBarContainer);

        progressBarContainer.remove();

        alert('boo!');
    },
    progress: function (e, data) {
        //make progress
    }
});

谢谢！

Answer 1

Blueimp'fileupload在旧浏览器上使用IframeTransport，如IE9。

我在the FAQ找到了：

但是，Iframe传输要求必须在一个请求中上传所有选择，只是因为文件输入用于提交到隐藏iframe的标准HTML表单，并且无法以这种方式分隔所选文件。 / p>

所以我认为它解释了你的问题：一个请求只暗示一个完成回调。

要验证它，您可以使用 forceIframeTransport 选项在Chrome或Firefox上对其进行测试。

在IE9中同时上传文件时没有调用blueimp fileupload

1 个答案: