HTML5多文件上传:通过AJAX一一上传 [英] HTML5 multiple file upload: upload one by one through AJAX

问题描述

我有一个多文件上传表单:

I have a multiple files upload form:

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

我用 ajax 发布这些文件.我想一一上传选定的文件(为了创建单独的进度条，出于好奇).

I am posting these files with ajax. I would like to upload the selected files one by one (to create individual progress bars, and out of curiousity).

我可以通过

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

yieling

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

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

But FileList is immutable and I can't figure out how to submit the single file.

我认为这是可能的，因为我看到了 http://blueimp.github.com/jQuery-File-Upload/.然而，我不想使用这个插件，因为它与学习和结果一样多(无论如何它都需要太多的自定义).我也不想使用 Flash.

I think this is possible as I saw http://blueimp.github.com/jQuery-File-Upload/. I don't want to use this plugin however as it's as much about learning as the result (and it would need too much custimizing anyway). I also don't want to use Flash.

推荐答案

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

For this to be a synchronous operation, you need to start the new transfer when the last one is done. Gmail, for example, send everything at once, concurrently. The event for the progress on AJAX file upload is progress or onprogress on the raw XmlHttpRequest instance.

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

So, after each $.ajax(), on the server side (which I don't know what you'll be using), send a JSON response to execute the AJAX on the next input. One option would to bind the AJAX element to each element, to make things easier, so you could just do, in the success the $(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

上面的代码适用于多个 但不适用于 ，因为情况，应该是:

The above code would be for multiple <input type="file"> but not for <input type="file" multiple>, in that case, it should be:

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 

这篇关于HTML5多文件上传:通过AJAX一一上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！