Ajax表單上傳進度欄
[英]Ajax form upload progress bar
問題描述
嘗試制作表單上傳的進度條（舊的HTML4表單上傳，而不是新的HTML5 API）。 該進度實際上跟蹤文件移動后正在執行的其他工作。 它的設計方式是流保持打開狀態，直到完成其他工作為止，然后服務器端方法最終返回並關閉流。
我遇到了一些可能是Chrome特有的問題。 我也有一個可行的實現，但是我希望能得到“更好”的東西。
對於任何可能要求代碼的人：故意不在這里。 該場景說明了問題； 代碼本身並不是“過錯”，只會更加混亂。
簡而言之，嘗試失敗＃1
- 啟動表格上傳
- 在Ajax調用上設置間隔，以獲取某些JSON的進度
- 將數據渲染到進度條
失敗原因：上載流阻止了頁面上的其他活動，並且您在傳輸期間無法進行其他Ajax調用。
簡而言之，嘗試失敗＃2
- 創建一個包含相同Ajax調用的iFrame
- 將數據呈現到iFrame中的元素（所需的一切都是自包含的，至少沒有引用“頂部”文檔）
結果：
在啟動表單上傳之前，我可以從JSON渲染“狀態：正在等待”。 渲染功能還增加了一個計數器，因此我將看到“嘗試#X”。 狀態等待期間，嘗試次數將增加。
傳輸啟動后，Ajax調用成功達到200，我可以檢查響應以了解JSON實際上在那里。
但是，我無法在iFrame中更新“影子DOM”（這是正確的術語嗎？）。 嘗試訪問iFrame中的節點並對其進行修改失敗。 即使計數器沒有增加。
傳輸完成后，它將成功呈現“狀態：完成”，並且計數器將向前跳轉（計數器在增加，但是將其呈現給iFrame卻無法正常工作）
GRR！
成功嘗試
iFrame不再請求Ajax。 iframe的src屬性設置為返回預渲染進度欄的URL。 加載到iframe中的文檔設置為重新加載自身。 因此，在指定的時間間隔內，它會重新渲染“移動”的新進度條。
結果是一個“工作中”的進度條，盡管有時請求中的延遲會導致iframe在一秒鍾內空白，這不是我的偏好。
有人能想到一種更好的方法嗎？ 是否可以在iFrame中使用表單本身，而在“頂部”文檔中使用Ajax？
我主要想將表示層與數據層分開，但是只要我必須返回渲染的進度條，那是行不通的。 另外，如果我能找到一種通過Ajax更新進度條的方法，則不會出現“空白”提示。
4 個解決方案
解決方案1
3 已采納 2013-04-24 19:48:45
要擴展我的評論並提供指導，要執行“隱藏的iframe文件上傳”，您需要有一個帶有名稱的隱藏框架（不是嗎？）。
<html>
<body>
<iframe name="file-upload" src="" style="border: none; visibility: hidden; width: 0; height: 0; position: absolute; top: 0; left: 0;"></iframe>
The iframe shouldn't be visible, just pretend I didn't use inline styles though.
<form id="uploadForm" action="anaction.php" enctype="whatever-you-need-here" method="post">
File: <input type="file" /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>
到目前為止，所有漂亮的標准東西。 接下來是Javascript：
var form = document.getElementById("uploadForm");
form.onsubmit = function() {
console.log("The form has been submitted, start progress!");
}
form.target = "file-upload"; // the name of the iframe
// Go about your business, when "Upload" is pressed the file will be submitted
// to the iframe so you'd start your progress requests on form submit.
忽略不良做法，這是一個簡單的示例。
解決方案2
1 2013-04-24 19:24:45
老實說，我負責應用程序的所有前端開發，而我一直在尋找相同的東西。 首先，我嘗試僅使用我們的socket.io發送回一個數字，然后我將其轉換為一個百分比。 然后，將其應用於twitter bootstrap編排。
我最終要做的就是堅持使用優良的上載器http://fineuploader.com/該文檔有點糟透了，您需要花點時間玩，但是它有一個內置事件，在上載時會一遍又一遍地觸發實際可以為您帶來進展的東西。
解決方案3
1 2013-04-24 19:29:45
我決定使用： http : //blueimp.github.io/jQuery-File-Upload/，因為它是免費的，並且為您提供了不錯的進度條。
解決方案4
1 2013-04-24 19:30:52
上一次，我只是將帶有數據的表單提交給了一些不可見的iframe，然后我就忘了它。
接下來，我開始輪詢一些URL / REST API以獲取進度。
提交完成后-事件將觸發，其處理程序將停止進度輪詢。
我認為這種方法沒有任何問題，但是由於某種原因，你們倆似乎都不符合我的描述，因此我將其作為答案。
如果您使用jQuery，則最好的方法是使用jQuery Form plugin “ ajaxify”您的表單。 您可以參考以下問題示例： 使用jQuery的文件上傳進度欄 。
上傳時的Ajax進度欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.