HTML5多文件上传：通过AJAX一对一上传

小编典典

HTML5多文件上传：通过AJAX一对一上传

ajax

我有多个文件上传表单：

<input type="file" name="files" multiple />

我正在用ajax发布这些文件。我想一个接一个地上传所选文件（以创建单独的进度条，并且出于好奇）。

我可以通过以下方式获取文件列表或单个文件

FL = form.find('[type="file"]')[0].files
F  = form.find('[type="file"]')[0].files[0]

耶陵

FileList { 0=File, 1=File, length=2 }
File { size=177676, type="image/jpeg", name="img.jpg", more...}

但是FileList是不可变的，我不知道如何提交单个文件。

我认为这是可能的，因为我看到了 http://blueimp.github.com/jQuery-File-
Upload/。我不想使用这个插件，因为它既要学习又要学习结果（无论如何，它都需要太多的刺激）。我也不想使用Flash。

阅读 230

2020-07-26

共1个答案

小编典典

为了使它成为同步操作，您需要在最后一次传输完成后开始新的传输。例如，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

上面的代码将用于多个，<input type="file">但不能用于<input type="file" multiple>，在这种情况下，应为：

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