HTML5多文件上传:通过AJAX逐个上传

Question

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

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

Answer 1

我遇到了同样的问题，并带来了这个解决方案。我只需使用多部分检索表单，并在递归调用（文件后的文件）中启动ajax请求，该请求仅在完成后调用下一个。

var form = document.getElementById( "uploadForm" );
var fileSelect = document.getElementById( "photos" );
var uploadDiv = document.getElementById( "uploads" );

form.onsubmit = function( event ) {
    event.preventDefault(  );

    var files = fileSelect.files;
    handleFile( files, 0 );
};

function handleFile( files, index ) {
    if( files.length > index ) {
        var formData = new FormData(  );
        var request = new XMLHttpRequest(  );

        formData.append( 'photo', files[ index ] );
        formData.append( 'serial', index );
        formData.append( 'upload_submit', true );

        request.open( 'POST', 'scripts/upload_script.php', true );
        request.onload = function(  ) {
            if ( request.status === 200 ) {
                console.log( "Uploaded" );
                uploadDiv.innerHTML += files[ index ].name + "<br>";
                handleFile( files, ++index );
            } else {
                console.log( "Error" );
            }
        };
        request.send( formData );
    }
}

Answer 2

这看起来是一个非常好的教程，正是您想要的。

注意到，并非所有浏览器都支持通过vanilla ajax上传，我仍然建议使用iframe。（即动态创建iframe并使用javascript发布）

我一直在使用这个脚本，我发现它非常简洁。如果你想学习如何通过创建iframe来上传，你应该深入了解它的源html" target="_blank">代码。

希望有帮助：）

额外编辑

要使用iframe方法创建进度条，您需要在服务器端做一些工作。如果您使用的是php，您可以使用：

• php5.4 的会话上传进度
• 上传 php 的进度包

如果使用nginx你也可以选择用它们来编译上传进度模块

所有这些都以相同的方式工作——每次上传都有一个UID，您将通过ajax以一致的时间间隔请求与该ID相关的“进度”。这将返回由服务器确定的上传进度。

Answer 3

要使其成为同步操作，需要在完成最后一次传输时启动新传输。例如，Gmail可以同时发送所有信息。AJAX文件上传进度的事件是原始XmlHttpRequest实例上的progress。

因此，在每个< code>$之后。ajax()，在服务器端(我不知道您将使用什么)，发送一个JSON响应，在下一次输入时执行ajax。一种选择是将AJAX元素绑定到每个元素，以使事情变得更容易，所以您只需在< code>success中执行< code>$(this)即可。同级('输入')。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

上面的代码将用于多个

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