文件上传进度不丢失页面状态

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 但我不知道在哪里把它放到我的照片中。

该文档肯定给出了干净的代码 sn-ps，但我不确定 nginx 模块的安装位置或如何使用它。还有其他简单的方法可以在不丢失页面状态的情况下跟踪我的上传进度吗？关于如何使用 Nginx 的 ELaborations 也很受欢迎。提前非常感谢。

Answer 1

我在两个不同的上传库上取得了一些成功，这两个库都有 HTML 5 选项而不是 Flash。

上传：http://www.plupload.com/

上传者：http://fineuploader.com/

Answer 2

单击上传按钮后，我的 AJAX 就会启动，当我刷新时

注意，如果加载原始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;
  }
});