jquery 带表单数据的文件上传队列

Question

我正在尝试使用我制作的脚本一个一个地上传文件，但它一次上传了所有文件。

files_obj 存储通过 html 输入元素输入的文件。

var files_obj = {};

var uploading = false;

function upload_all()
{               
    $.each(files_obj, function(i, file) {

        if( !uploading )
        {
            uploading = true;

            var xhr = new XMLHttpRequest;
            var formdata = new FormData();

            fd.append("file",file);

            xhr.open('POST','upload.php',true);
            xhr.send(formdata);
            uploading = false;

        }
    });
}

变量 "uploading" 存储正在上传的文件的当前状态，因此在上传后它被设置为 false 并且队列中的下一个文件应该上传。

Answer 1

试试这个

function upload_sequentially(input, callback){
  var files = [], current = 0;
  if (input instanceof HTMLInputElement && input.type === 'file') {
    files = input.files;
  } else if (input instanceof FileList || Array.isArray(input)) {
    files = input;
  } else if (typeof input === 'object') {
    for (var key in input) {
      if (input.hasOwnProperty(key)) files.push(input[key]);
    }
  } else {
    throw new Error('Invalid input');
  }
  if (files.length === 0) return callback(null);
  return (function upload(file){
    var formdata = new FormData(), xhr = new XMLHttpRequest();
    formdata.append('file', file);
    xhr.addEventListener('progress', function(e){
      var percentComplete = (e.loaded / e.total * 100 | 0) + '% complete';
      console.log('Upload #' + current + ' is ' + percentComplete );
    }, false);
    xhr.addEventListener('load', function(e){
      if (xhr.status >= 400) {
        callback(new Error('Unable to upload'));
      } else if (current === files.length - 1) {
        callback(null);
      } else {
        upload(files[++current]);
      }
    }, false);
    xhr.addEventListener('error', callback, false);
    xhr.addEventListener('abort', callback, false);
    xhr.open('POST', 'upload.php', true);
    xhr.send(formdata);
  })(files[0]);
}

然后您需要向它传递一个类似数组的文件对象和一个回调函数：

upload_sequentially(files, function(err){
  if (err) {
    console.error(err);
  } else {
    console.log('Uploaded all ' + files.length + ' files');
  }
});

jquery 带表单数据的文件上传队列

jquery file upload queue with formdata

html

jquery

xmlhttprequest

form-data