文件上傳進度不丟失頁面狀態

Question

我是一個絕對的初學者，嘗試實現一個基於Python的服務器端組件的文件上傳模塊。我使用簡單的JQuery AJAX將文件內容發佈到我的服務器，並顯示一個進度條，直到AJAX返回。

$.ajax({ 
       type: "POST", 
       url: "/upload", 
       data: { 

        filecontents: contents, 

       }, 
       cache: false, 
       success: function(result) { 

         alert("success"); 

       }, 
       error: function(jqXHR,textStatus,errorThrown){alert("Upload failed.");} 
      }); 

現在，我在我的應用程序中有其他鏈接。一旦我點擊上傳按鈕，我的AJAX就會啓動，當我刷新頁面或返回到另一個鏈接時，上傳在後端繼續，但是頁面失去了它的所有狀態。

我查找了所有可能的解決方案，可以在不丟失進度的情況下進行此文件上傳，但所有解決方案都適用於基於.swf的「Uploadify」或基於Nginx的文件上傳模塊。 Nginx看起來很有趣NGinx doc 但我無法知道在哪裏可以看到我的照片。

該文件肯定會給出乾淨的代碼片段，但我不確定在哪裏適合nginx模塊或如何使用它。任何其他簡單的方式來跟蹤我的上傳進度，而不會丟失頁面的狀態？ ELaborations關於如何使用Nginx也很感激。提前致謝。

Answer 1

我有兩個不同的上傳庫取得了一些成功，這兩個庫都有HTML 5選項而不是Flash。

Plupload：http://www.plupload.com/

細者：http://fineuploader.com/

Answer 2

當我點擊上傳按鈕，我的AJAX開始，當我刷新

注意，不是某些頁面，如果頁面是「刷新「ed如果原件html文件被加載，有progress元素，value設爲0？如果是，可以用新的進度元素代替progress元素，然後將替換的progress元素value設置爲localStorage.getItem("progress")值。

HTML

<progress min="0" max="0" value="0" /> 

JS

$.ajax({ 
    type: "POST", 
    url: "/upload", 
    data: { 
    "filecontents": contents 
    }, 
    cache: false, 
    success: function(result) { 
    alert("success"); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
    alert("Upload failed.") 
    }, 
    xhr: function() { 
    var progress = $("progress"); 
    var xhrUpload = $.ajaxSettings.xhr(); 
    console.log(xhrUpload); 
    localStorage.setItem("progress", 0); 
    if (xhrUpload.upload) { 
     xhrUpload.upload.onprogress = function(evt) { 
     localStorage.setItem("progress", evt.loaded); 
     progress.attr({ 
      "max": evt.total, 
      "value": localStorage.getItem("progress") 
     }) 
     }; 
    } 
    return xhrUpload; 
    } 
});