jquery – HTML5多文件上传:通过AJAX一个一个上传

前端之家收集整理的这篇文章主要介绍了jquery – HTML5多文件上传:通过AJAX一个一个上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个多文件上传表单:
<input type="file" name="files" multiple />

我用ajax发布这些文件。我想逐一上传选定的文件(创建个别进度条,出于好奇)。

我可以得到文件或单个文件的列表

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是不可变的,我不知道如何提交单个文件

我认为这是可能的,因为我看到了http://blueimp.github.com/jQuery-File-Upload/.我不想使用这个插件,因为它是尽可能多的学习作为结果(和它将需要太多的批评无论如何)。我也不想使用Flash。

解决方法

为了进行同步操作,需要在最后一次完成时启动新的传输。例如,Gmail同时发送所有内容
AJAX文件上传进度的事件是对原始XmlHttpRequest实例的进度或进度。

所以,在每个$ .ajax()之后,在服务器端(我不知道你将要使用什么),发送一个JSON响应来在下一个输入执行AJAX。一个选项是将AJAX元素绑定到每个元素,使事情变得更容易,所以你可以在$(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',this.files[count]),'success': function(){
       count++;
       $this.trigger('ajax');
    }
  });
}).trigger('ajax'); // Execute only the first input[multiple] AJAX,we aren't using $.each
原文链接:https://www.f2er.com/jquery/183298.html

猜你在找的jQuery相关文章