小编典典

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。


阅读 232

收藏
2020-07-26

共1个答案

小编典典

为了使它成为同步操作,您需要在最后一次传输完成后开始新的传输。例如,Gmail可同时发送所有内容。AJAX文件上传进度事件是progressonprogress在原始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