2013-03-02 219 views
3

我發現HTTP PUT請求IST最適合非常大的文件上傳(1GB或更多)。HTTP PUT請求 - 進度條實施

解決方案的工作很好,我可以上傳我的選擇的任何文件到服務器。但是,我在監視上傳過程中遇到困難。

我已經實現了onprogress回調,但是這個只有在通過PUT上傳文件後才被調用。

我的JavaScript代碼:

var req = createRequest(); 
req.open("PUT", "PHP/upload_file.php?folder=" + aUploadedFile.upload_folder + "&master_folder=" + settings.strServerSideMasterFolder + "&file_name=" + aUploadedFile.file_name); 
req.setRequestHeader("Content-type", "text/plain"); 
req.onload = function (event) 
{ 
    console.log("OnLoad Called: " + aUploadedFile.file_name); 
} 
req.onprogress = function (event) 
{ 
    console.log("OnProgress Called: " + aUploadedFile.file_name); 
} 
req.send(aUploadedFile.file_object); 
  • 什麼是我的選擇,當我想通過監測PUT上傳進度,好嗎?
  • 我應該建立另一個JavaScript AJAX調用,將監視上傳的文件○服務器的大小?
  • 是否有其他可用的工作解決方案?

我用:

  • HTML5
  • 的JavaScript
  • PHP
  • 阿帕奇

我不使用:

  • jQuery的

預先感謝您。

+0

你見過這個嗎? http://stackoverflow.com/questions/49564/how-to-implement-file-upload-progress-bar-on-web – 2013-03-02 12:54:16

+1

@JohnZwinck:嗨。感謝您的評論。我的問題可能非常具體?您的鏈接顯示了進度條的各種實現,但它們中沒有一個與HTTP PUT請求相關。爲HTTP POST請求創建進度條相當簡單,但問題是**相同的代碼不適用於HTTP PUT請求**。 – 2013-03-02 13:00:20

+0

你爲什麼不迴避POST? – 2013-03-02 13:57:16

回答

4

你試過xhr.upload.onprogress而不是xhr.onprogress

如果這不起作用,您可以建立另一個JavaScript AJAX調用,就像您說的那樣。最近,我製作了一個上傳系統,每行讀取文件行,它需要顯示一些關於上傳的額外信息,而不僅僅是百分比,所以我做了這樣的事情:

  • 主要第一個Ajax請求,負責處理文件
  • 在該文件中的文件時,我不得不關閉連接,所以AJAX請求能夠完成,但PHP腳本將仍然運行,使用這樣的:
ob_start(); 
$file = tempnam('/tmp', uniqid()); // create a temp file to show status of the action 
echo json_encode(array('file' => $file)); 
header('Content-length: '.ob_get_length()); 
header('Connection: close'); 
ob_end_flush(); 
flush(); // The AJAX request is completed here, but the script is still running... 

function writeToFile($handle, $arr) { 
    ftruncate($handle, 0); // empty file 
    fwrite($handle, json_encode($arr)); 
} 
$handle = fopen($file, 'w'); 
while (readLine($uploadedFile)) { 
    // code to process line 
    writeToFile($handle, array('progress' => $current/$total, 'action' => 'Reading...')); 
} 
// insert into database 
writeToFile($handle, array('progress' => '100', 'action' => 'Inserting into database...')); 
fclose($handle); 
  • 在主頁面,AJAX請求將返回一個包含信息的文件的名稱,所以我會創建多個GET請求到該文件,使用setInterval方法

注:在我的情況,我創建了另一個PHP文件來顯示進度文件的內容(使用file_get_contents),因此我可以在操作完成時手動刪除該文件。

+2

嗨,+1並感謝您的回覆。你寫的很有道理。要回答你的問題,不,我沒有嘗試'xhr.upload.onprogress',但我會試一試。同時,我能夠通過額外的AJAX調用來實現進度條。我不喜歡,對於每個進度條,我都必須發出幾個甚至數百個AJAX呼叫。因此,我研究COMET和AJAX Long Polling等主題,它們在服務器和客戶端之間建立了永久連接,並且可以更精確地更新進度欄。我正在研究它,所以我會看看它是否適用。 – 2013-03-02 14:23:17

+3

我必須告訴你,我剛剛嘗試過'xhr.upload.onprogress'而不是'xhr.onprogress',它使所有不同。 'xhr.upload.onprogress' **工作得很好**。雖然我不明白其中的區別,但我非常感謝你提供了這個偉大的建議,並且我將你的答案標記爲我的問題的*可接受的答案*。再次感謝你! – 2013-03-02 14:36:25

+0

有趣的解決方案。 – 2017-04-25 05:10:11