如何通過JavaScript上傳多個文件並保持UI響應？

我有一個網站，需要從1-50個文件上傳到亞馬遜網絡服務桶。目前實現的方式是循環遍歷所有文件並上傳它們。這似乎工作，因爲我可以看到第一個〜6上傳的進度更新並完成。當每個人都完成並且連接可用時，我會看到新的人開始上傳。但是在這段時間的html頁面卻很沒響應。用戶不能滾動頁面。如何通過JavaScript上傳多個文件並保持UI響應？

問題：上傳這種文件列表的最佳方式是什麼？他們應該排隊嗎？或者Web瀏覽器是否處理已經上傳的文件隊列？

如何在上載過程中保持UI的響應？

以下代碼是手動輸入的，請原諒。

var files = []; //file is populated with up to ~50 files 
files.forEach(function(file){ 

       var xhr = new XMLHttpRequest(); 

       xhr.onreadystatechange = function() { 
        if (xhr.readyState == 4 && xhr.status == 200) { 
         /* update ui to let user know upload for this file is complete */ 
        } 
       }; 

       xhr.upload.onprogress = function() { /* update ui progress indicator in grid for this file upload */ }; 
       xhr.open("PUT", "http://s3.amazonaws.com/" + AWS_Bucket_Name + "/" + File_Name, true); 
       xhr.setRequestHeader("Authorization", "AWS " + AWS_Access_Key + ":" + SignedRequest); 
       xhr.setRequestHeader("x-amz-date", Current_Formatted_Date); 
       xhr.send(this.file); 
});

來源

2014-05-02 B.McCarthy

那麼好吧。

這是通常每個人都面臨的問題。

我們也面臨着，我們上傳了大約4GB的文件到服務器，並且它凍結了HTML瀏覽器。

所以選項是：創建C＃和AJAX一個HTTP文件處理程序創建一個線程上傳文件

Howerver你的情況，你上傳到亞馬遜，最好是在後臺創建並釋放一個線程瀏覽器

來源

2014-05-02 11:18:48

您的意思是使用Web Workers [link]（https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers）如下所示？ var myWorker = new Worker（「my_task.js」）; （「消息」，函數（oEvent））{ } myWorker.postMessage（「」）; //開始工作。 –

抱歉格式化，沒有意識到我無法在評論中輕鬆編寫代碼。 –

是的，爲什麼不！此外，如果你的代碼是在服務器腳本語言如C＃，那麼你可以使用本機代碼來創建線程 –

如何通過JavaScript上傳多個文件並保持UI響應？

回答

相關問題