iframe文件上傳的進度條？

Question

我目前正在開發一個Web應用程序，它允許用戶在不重新加載頁面的情況下上傳文件。到目前爲止，用戶可以瀏覽文件，而當輸入改變時，文件使用以下iFrame技術上傳：

HTML：

<iframe name="iframe-target" src="./Image" style="display:none;"></iframe> 
<form method="POST" enctype="multipart/form-data" id="old-style-upload" target="iframe-target" action="./Image"> 
    <input type="file" name="files[]" multiple id="old-file-picker" > 
</form> 

使用Javascript/jQuery的：

$('#old-file-picker').change(function() { 
    // Submit the form 
    $('#old-style-upload').submit(); 
}); 
$('iframe[name=iframe-target]').load(function() { 
    // Code that deals with the newly uploaded files 
    $('#old-style-upload').get(0).reset(); 
}); 

這個偉大的工程，但是，用戶無法知道這些文件上傳的方式，也不需要多長時間。有沒有辦法讓進度條顯示文件上傳的進度？

我能想到的唯一的事情是顯示loading gif。

Answer 1

要做到這一點，如果你使用普通的multipart/form-data的形式後，你需要對服務器端的代碼;一個可以反饋客戶端瀏覽器中運行的JavaScript的進度。看看at this previously asked question。或者，你可以使用Flash（但你可能不想）或HTML 5.你可以看看這個問題和this question concerning XMLHTTPRequests。