javascript - 如何在运行时使用 blueimp fileupload 从当前上传队列中跳过文件

Question

您好，我在从当前上传队列中跳过文件时遇到问题。

我现在的情况

1. 我想在开始上传时中止第二个文件，这样它就不会在 abort

   之后发送

2. 我想从上传队列中跳过第 3 个文件 - 这不是中止，因为只有当前文件我们可以中止

我是这样做的

    var uploadFileList = [];

   add: function (e, data) {
             uploadFileList.push(data.files[0].name);
             data.submit();
     },
    
    .on('fileuploadchunksend', function (e, data) {
            /** Abort code starts here **/
            var filename = uploadFileList[1]; //abort 2nd file
            var currentFilename = data.files[0].name;
            if(currentFilename == filename){
                  data.abort();
             }
            /** Abort code Ends here **/

            //skip code
             data.originalFiles.splice(3,1);
        })

注意:我不想要任何用于abort 或 skip

的用户界面

这是完整代码(未跳过):http://jsfiddle.net/eabangalore/dm9j5uzn/84/

对于当前上传，它将被中止，对于队列，它将被跳过。

请帮助我提前谢谢!!

Answer 1

像这样尝试:

$(function() {
  var skip = [2]; //file indexes to skip
  var abort = [1]; //file indexes to abort
  var uploadFileList = [];
  var indexAdd = 0;
  var countSubmit = 0;
  var countAlways = 0;
  var indexUpload = null;

  $('#fileupload').fileupload({
    url: '/echo/json/',
    maxChunkSize: 1024 * 1024,
    maxRetries: 3,
    dataType: 'json',
    multipart: false,
    sequentialUploads: true,
    progress: function(e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10),
        meter = $('.progress .meter'),
        percent = progress + '%';
      meter.css('width', percent).text(percent);
      $('#currentFileName').text(data.files[0].name);
    },
    add: function(e, data) {
      uploadFileList.push({ name: data.files[0].name, state: null, jqXHR: null });

      //Skip files in the skip array - i.e. don't start the file upload
      if (skip.indexOf(indexAdd)  !== -1) {
        $('#skipFilename').text(uploadFileList[indexAdd].name);
        uploadFileList[indexAdd].state = 'skipped';
        console.log(uploadFileList[indexAdd].name, 'skip');
      } else {
        uploadFileList[indexAdd].jqXHR = data.submit();
        countSubmit++;
      };

      indexAdd++;
    },
    done: function(e, data) {
      /* data.context.text('Upload finished.') */
      ;
    },
    fail: function(e, data) {}
  }).on('fileuploadchunksend', function(e, data) {
    /* $.each(data.files, function (index, file) {
      console.log('fileuploadchunksend file: ' + file.name);
    }); */
    /** Abort code starts here **/
    /* var filename = uploadFileList[1]; //abort 2nd file
    var currentFilename = data.files[0].name;
    if (currentFilename == filename) {
      data.abort();
    } */
    /** Abort code Ends here **/
    console.log(data.files[0].name, 'fileuploadchunksend');
    
    //abort files in the abort array
     for(var i = 0; i < uploadFileList.length; i++) {
      if(uploadFileList[i].name === data.files[0].name) {
        indexUpload = i;
        
        if(abort.indexOf(i) !== -1) {
          setTimeout(abortUpload, 0); //setTimeout seems to solve the issue of the jqXHR.abort() not stopping the upload
        } else {
          uploadFileList[i].state = 'sent';
        };
      };
    };

    //skip code
    data.originalFiles.splice(3, 1);
  }).on('fileuploadchunkdone', function(e, data) {
   /*  console.info('testing', data); */
  }).on('fileuploadstop', function(e) {
    uploadFileList.length = 0;
    }).on('fileuploadsend', function (e, data) {
    console.log(data.files[0].name, 'send');    
    }).on('fileuploaddone', function (e, data) {
    console.log(data.files[0].name, 'done', getStatus(data));
  }).on('fileuploadfail', function (e, data) {
    console.log(data.files[0].name, 'fail', getStatus(data));
  }).on('fileuploadalways', function (e, data) {
    console.log(data.files[0].name, 'always', getStatus(data));
    countAlways++;
    
    if(countAlways === countSubmit) {
        for(var i = 0; i < uploadFileList.length; i++) {
        delete uploadFileList[i].jqXHR;
      };
        console.log('done', uploadFileList);
    };
  });
  
  function getStatus(data) {
    //check if aborted
    for(var i = 0; i < uploadFileList.length; i++) {
      if(uploadFileList[i].name === data.files[0].name && uploadFileList[i].state === 'aborted') {
        return 'abort';
      };
    };
    
    return data.textStatus;
  };
  
  function abortUpload() {
    if(uploadFileList[indexUpload].jqXHR !== null) {
      console.log(uploadFileList[indexUpload].name, 'aborting');
      uploadFileList[indexUpload].state = 'aborted';
      uploadFileList[indexUpload].jqXHR.abort();
    };
  };
});

http://jsfiddle.net/0qmLw8pg/

初始设置要跳过或中止的文件的数组。

要跳过文件(即不启动上传)，请不要在该文件的 add 回调中运行 data.submit()。

中止适用于 jQuery Ajax request对象，例如从 send 回调返回。 send 不能在这种情况下使用，因为它会发送所有文件，因此您无法跳过任何文件。可以调用一个运行abort 的函数，为add 回调中的每个文件返回一个单独的Ajax 对象。另一种中止方法是在 fileuploadsend callback 中返回 false (就像 jQuery Ajax beforeSend 一样)。

已包含控制台日志，因此您可以看到它正在运行。此代码在假设文件名是唯一的情况下工作。

编辑:已更新以使用 Ajax 对象并在初始 fileuploadsend 之后的任何时候中止上传，例如(fileuploadchunksend).