javaScriptは複数のファイルをアップロードする - 終了時に

Question

私はこのファイルをアップロードするjavascript機能を持っていて、複数のファイルのアップロードが完了した時点ですべてのファイルがいつアップロードされるかを知りたい。 これを行う可能性はありますか？あなたは配列にfilesオブジェクトを変換するためにArray.from()か.slice()を使用することができます

function uploadFiles(files, userId, projectId, successCallback, progressCallback) { 
     if (files && files.length) { 
      for (var i = 0; i < files.length; i++) { 
       var file = files[i]; 
       if (!file.$error) { 
       Upload.upload({ 
        url: 'api/fileuploads/fileupload/' + userId + '/' + projectId, 
        data: { 
         file: file 
        } 
       }).then(function (resp) { 
        if (successCallback) { 
         successCallback(resp); 
        } 
       }, null, function (evt) { 
        var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
        var log = 'progress: ' + progressPercentage + '% ' + evt.config.data.file.name + '\n'; 
        if (progressCallback) { 
         progressCallback(log); 
        } 
       }); 
       } 
      } 
     } 
    }; 

Answer 1

、.map()Promise.all()

function uploadFiles(files, userId, projectId, successCallback, progressCallback) { 
    if (files && files.length) {  
    return Promise.all(Array.from(files)).map(function(file) { 
     return Upload.upload({ 
      url: 'api/fileuploads/fileupload/' 
       + userId + '/' + projectId, 
      data: { 
      file: file 
      } 
     }).then(function(resp) { 
      if (successCallback) { 
      successCallback(resp); 
      } 
     } 
     // what is second parameter to `.then()`? 
     // why is `null` passed here? 
     , null, function(evt) { 
      var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
      var log = 'progress: ' + progressPercentage + '% ' 
        + evt.config.data.file.name + '\n'; 
      if (progressCallback) { 
      progressCallback(log); 
      } 
     }); 
    }) 
    } 
}; 

使用

uploadFiles(/* parameters */) 
.then(function() { 
    console.log("all uploads complete") 
}) 
.catch(function(err) { 
    console.log(err); 
}); 

Answer 2

あなたはどのように多くの時間をカウントするカウンタを追加しようとすることができますアップロード予定が解決しました：

function uploadFiles(files, userId, projectId, successCallback, progressCallback) { 
     if (files && files.length) { 
      var count = 0; 
      for (var i = 0; i < files.length; i++) { 
       var file = files[i]; 
       if (!file.$error) { 
       Upload.upload({ 
        url: 'api/fileuploads/fileupload/' + userId + '/' + projectId, 
        data: { 
         file: file 
        } 
       }).then(function (resp) { 
        if (++count == files.length) { 
         if (successCallback) { 
          successCallback(resp); 
         } 
        } 
       }, null, function (evt) { 
        var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
        var log = 'progress: ' + progressPercentage + '% ' + evt.config.data.file.name + '\n'; 
        if (progressCallback) { 
         progressCallback(log); 
        } 
       }); 
       } 
      } 
     } 
    }; 

Answer 3

あなたはPromise.allまたはjQuery.when

function uploadFiles(files, userId, projectId, successCallback, progressCallback) { 
 
    
 
     if (files && files.length) { 
 
      var uploads = []; 
 
      for (var i = 0; i < files.length; i++) { 
 
       var file = files[i]; 
 
       if (!file.$error) { 
 
       var upload = Upload.upload({ 
 
        url: 'api/fileuploads/fileupload/' + userId + '/' + projectId, 
 
        data: { 
 
         file: file 
 
        } 
 
       }).then(function (resp) { 
 
        if (successCallback) { 
 
         successCallback(resp); 
 
        } 
 
       }, null, function (evt) { 
 
        var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
 
        var log = 'progress: ' + progressPercentage + '% ' + evt.config.data.file.name + '\n'; 
 
        if (progressCallback) { 
 
         progressCallback(log); 
 
        } 
 
       }); 
 
       uploads.push(upload); 
 
       } 
 
       
 
      } 
 
      Promise.all(uploads).then(function(values){}); 
 
     } 
 
     
 
    };