我有一个多文件上传表单:
<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文件上传进度的事件是对原始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