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;

        }
    });
}

变量＆＃34;上传＆＃34;存储正在上传的文件的当前状态，因此当它被上传时，它被设置为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');
  }
});

带有formdata的jquery文件上传队列

1 个答案: