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模块的适用位置或如何使用它。还有其他任何简单的方法来跟踪我的上传进度而不会丢失页面的状态吗？关于如何使用Nginx的说明也很受欢迎。非常感谢。

Answer 1

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

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

Fine Uploader：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;
  }
});

文件上载进度而不会丢失页面状态

2 个答案: