我遇到了这个奇怪的问题，我尝试了几种解决方案(甚至在他们的网站上实现了与 Basic Plus 演示相同的解决方案)。我可以很好地上传文件，单个或多个。他们通过单击单个项目或“全部上传”按钮来上传。问题是尝试在上传之前或之后添加其他文件。文件上传插件甚至不会检测到这些文件在文件输入中发生变化，因此它永远不会触发“fileuploadadd”事件，并且需要我刷新页面才能上传更多文件。我想知道 fileupload 更改事件是否在某处丢失，但我终究无法弄清楚在哪里。

另外，blueimp文件上传插件是否需要特定的JSON返回格式？目前，如果上传成功，我将返回 "{\"status\":\"success\"} 和类似的错误消息。编辑: 将响应格式更改为 blueimp 显示的示例无效。

这是我正在使用的 uploader 的一些代码。请注意，我目前使用的是 ASP.NET 和 jQuery 2.0.3，以及 jQuery UI 1.9.2。

function initFileUploader() {
    //initProgressBars();
    $(upload_progressbar_title).css('display', 'none');
    $(upload_progressbar).css('display', 'none');
    $(upload_upload).on('click', function () {
        $(upload_progressbar).css('display', 'block');
        $(upload_progressbar_title).css('display', 'block');
        $('.uploadbtn').click();
    });
    $(upload_browse).on('click', function () {
        $(upload_file).click();
        return false;
    });

    $.guid = 0;
    console.log('initialising file upload');

    var uploadButton = $('<input type="button" id="button" />')
        .addClass('button tiny').addClass('uploadbtn')
        .prop('disabled', true)
        .val('Processing...');

    var uploadCon = $('<div class="small-4  medium-6 large-6 columns progresscontainer" />')
            .append('<div class="progressbar" />')
            .append('<label class="progressbarlabel">Not uploading</label>');

    uploadCon.append($(uploadButton).on('click', function () {
        var $this = $(this),
            data = $this.parent().data();
        $this
            .off('click')
            .val('Abort')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
        data.submit().always(function () {
            $this.remove();
        }).success(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); })
        .error(function (jqXHR, textStatus, errorThrown) { console.log("Error: " + errorThrown + " - TextStatus " + textStatus); })
        .complete(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); });
    }));

    $(upload_file).fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(pdf|jpe?g|png|doc|docx)$/i,
        maxFileSize: 5000000, // 5 MB
    }).on('fileuploadadd', function (e, data) {
        var uniqueId = $.guid++;
        data.context = $('<div id="div_upload_dcon_' + uniqueId +'" class="row"/>').appendTo(upload_filescon);
        $.each(data.files, function (index, file) {
            file.uniqueId = uniqueId;
            var node = $('<div id="div_fname" class="small-6 medium-4 large-4 columns"/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                data.url = baseUrl + 'PostUploadFile?fileName=' + data.files[index].name + '&refId=' + ClientRefId + '&upbyid=' + ClientUserId + '&ticketId=' + globalTicketId;
                var contentNode = (uploadCon.clone(true).data(data));
            }
            node.appendTo(data.context);
            $(contentNode).appendTo(data.context);
            $(upload_file).on('change', function () {
                alert('changing fileinput');
            });
        });
    }).on('fileuploadstart', function (e, data) {
        initProgressBars();
    }).on('fileuploadchange', function (e, data) {
        alert('changing');
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.error) {
            console.log(file.error));
        }
        if (index + 1 === data.files.length) {
            $('.uploadbtn').val('Upload').prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogress', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#div_upload_dcon_' + data.files[0].uniqueId).progressbar('value', progress);
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $(upload_progressbar).progressbar('value', progress);
    }).on('fileuploaddone', function (e, data) {
        getTicketContent(globalTicketId);
    }).on('fileuploadstop', function (e, data) {
        $(upload_file).val('');
    }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index, file) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    });
}

最佳答案

好吧，经过一夜的 sleep 和更多的思考，我指定了这个选项

replaceFileInput: false,

在文件上传初始化期间。你猜怎么着，它现在按预期工作了。我猜文件输入丢失了，因为 fileupload 在上传或更改后默认克隆控件。

感谢任何人可能给出的任何考虑，我希望它在未来对其他人有用。

关于javascript - Blueimp 文件上传插件只上传一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23613926/