我有这个奇怪的问题，我尝试了几种解决方案（甚至在他们的网站上实现与Basic Plus演示相同）。我可以上传文件，无论是单个还是多个。他们只需点击单个项目或“全部上传”按钮即可上传。问题是尝试在上传之前或之后添加其他文件。文件上传插件甚至不会检测到这些文件在文件输入中发生了变化，因此它永远不会触发“fileuploadadd”事件，并且需要我刷新页面才能上传更多文件。我想知道文件上传更改事件是否在某个地方丢失了，但我不能为我的生活找出原因。
另外，blueimp文件上传插件是否需要特定的JSON返回格式？在那一刻，如果上传成功，我只是返回"{\"status\":\"success\"}，并发出类似的错误消息。 编辑：将响应格式更改为blueimp显示的示例无效。
这是我正在使用的上传器的一些代码。请注意，我目前正在使用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);
});
});
}
答案 0 :(得分：15)
好吧，经过一夜的睡眠并且更多地考虑它，我指定了这个选项
replaceFileInput: false,
在文件上传初始化期间。猜猜看，它现在按预期工作。我猜测文件输入丢失了，因为fileupload在上传或更改后默认克隆控件。
感谢任何人对此给予的任何考虑，我希望将来能为其他人派上用场。
答案 1 :(得分：3)
原来答案已经过去两年了，但我只是想出了我自己的案例（
如果使用replaceFileInput：false，则代码将无法在IE9中运行，IE9不支持较新的文件上载API。根据文档，此浏览器的后备支持取决于“iframe传输”，它需要每次都替换文件输入元素。读这对我来说是一个很大的线索。
真正杀死你的是：
window.service.ts您假设upload_file仍然是相同的元素，但它已被克隆替换。您正在旧文件输入元素上触发click事件。它存在，所以你得到系统浏览对话框，但它没有连接到任何管道。
因此，完全支持IE9的正确解决方案是每次触发此单击处理程序时，使用“find”重新定位upload_file。你没有包含你设置upload_file的代码，所以我不知道你的情况下正确的选择器是什么，但它看起来像这样：
//--------------------------------------------------------------------------------------------------
// Imports Section:
//--------------------------------------------------------------------------------------------------
import {Injectable} from 'angular2/core'
import {window} from 'angular2/src/facade/browser';
//--------------------------------------------------------------------------------------------------
// Service Class:
//--------------------------------------------------------------------------------------------------
@Injectable()
export class WindowService {
//----------------------------------------------------------------------------------------------
// Constructor Method Section:
//----------------------------------------------------------------------------------------------
constructor() { }
//----------------------------------------------------------------------------------------------
// Public Properties Section:
//----------------------------------------------------------------------------------------------
get nativeWindow(): Window {
return window;
}
}