javascript - 如何通过 JavaScript 上传多个文件并保持 UI 响应？

Question

我有一个网站，需要将 1-50 个文件上传到 Amazon Web Service Bucket。目前的实现方式是循环遍历所有文件并上传。这似乎有效，因为我可以看到前 6 个上传和完成的进度更新。当每一个都完成并且连接变得可用时，我看到新的开始上传。不过，这段时间内 html 页面的响应非常迟钝。用户无法滚动页面。

问题: 上传这样的文件列表的最佳方法是什么？他们应该以某种方式排队吗？或者网络浏览器是否已处理要上传的文件队列？

如何在上传过程中保持 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);
});

Answer 1

好吧好吧好吧。

这是每个人通常都会面临的问题。

我们也遇到过，我们正在向服务器上传大约 4GB 的文件，但它卡住了 HTML 浏览器。

所以选项是: 在C#和AJAX中创建一个HTTP文件处理程序来创建一个线程来上传文件

但是，在您的情况下，您要将其上传到亚马逊，最好是在后台创建一个线程并释放浏览器