html 通过ajax请求文件上传,HTML5多文件上传：通过AJAX一对一上传

小编典典

为了使它成为同步操作，您需要在最后一次传输完成后开始新的传输。例如，Gmail可同时发送所有内容。AJAX文件上传进度事件是progress或onprogress在原始XmlHttpRequest实例上。

因此，在$.ajax()服务器端的每一个之后(我不知道您将使用什么)，发送JSON响应以在下一个输入上执行AJAX。一种选择是将AJAX元素绑定到每个元素，以简化操作，因此您只需在success中即可$(this).sibling('input').execute_ajax()。

像这样：

$('input[type="file"]').on('ajax', function(){

var $this = $(this);

$.ajax({

'type':'POST',

'data': (new FormData()).append('file', this.files[0]),

'contentType': false,

'processData': false,

'xhr': function() {

var xhr = $.ajaxSettings.xhr();

if(xhr.upload){

xhr.upload.addEventListener('progress', progressbar, false);

}

return xhr;

},

'success': function(){

$this.siblings('input[type="file"]:eq(0)').trigger('ajax');

$this.remove(); // remove the field so the next call won't resend the same field

}

});

}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each

上面的代码将用于多个，但不能用于，在这种情况下，应为：

var count = 0;

$('input[type="file"]').on('ajax', function(){

var $this = $(this);

if (typeof this.files[count] === 'undefined') { return false; }

$.ajax({

'type':'POST',

'data': (new FormData()).append('file', this.files[count]),

'contentType': false,

'processData': false,

'xhr': function() {

var xhr = $.ajaxSettings.xhr();

if(xhr.upload){

xhr.upload.addEventListener('progress', progressbar, false);

}

return xhr;

},

'success': function(){

count++;

$this.trigger('ajax');

}

});

}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each

2020-07-26