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 />

我张贴这些文件与阿贾克斯。我想一个上传选择的文件之一（创建单独的进度条，以及出于好奇）。

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

yieling

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

不过，文件清单是不可改变的，我无法弄清楚如何提交单个文件。

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

我认为这是可能的，因为我看到<一href="http://blueimp.github.com/jQuery-File-Upload/">http://blueimp.github.com/jQuery-File-Upload/.我不想不过使用这个插件，因为它是尽可能多的关于学习的结果（和它需要太多custimizing反正）。我也不想使用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的文件上传进度进度或 onprogress 对原始 XmlHtt prequest 实例。

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.

所以，在每次 $。阿贾克斯（），在服务器端（我不知道你会用什么的），发送一个JSON响应上的下一个输入执行的AJAX。一种选择是到了AJAX的元素结合到每一个元素，以使事情更容易，所以你可以只做，在成功的 $（本） .sibling（输入）。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

以上code将是多个＆LT;输入类型=文件＆GT; 而不是＆LT;输入类型= 文件多＆GT; ，在这种情况下，它应该是：

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屋！