Python 如何将文件上传进度条添加到Django网站

我正在尝试使用

django progressbarupload应用程序

将进度条添加到我的django应用程序中。但它不起作用。。。。

django progressbarupload应用程序

templates标记加载正常，文件也正在上载到服务器，但进度条没有显示…控制台上没有javascript错误。。。我遵循了这一点

---

有谁能告诉我如何将进度条添加到Django应用程序中吗？

这显然是基于webkit的浏览器中的一个bug，下面是相关的线程：

这里还有相关的github问题：

---

要理解，webkit不允许在上传文件时进行ajax调用，通常的解决方法是使用动态创建的iframe（在上面的SO线程中提到）。

这不是最好的解决方案（也不太一致），但它将是最容易实现的

创建js文件，例如progress_bar.js

(function($){   
$(function(){
    $(document).ready(function() {
        $( "#form_id" ).submit(function( event ) {
          event.preventDefault();

          var post_data = new FormData($("form")[0]);

          $.ajax({
              xhr: function() {
                var xhr = new window.XMLHttpRequest();
                var new_div = document.createElement('div');

                new_div.innerHTML = '<progress id="progressBar" value="0" max="100" style="width:300px;"></progress><h3 id="status"></h3><p id="loaded_n_total"></p>';
                document.getElementsByClassName('submit-row')[0].appendChild(new_div)

                xhr.upload.addEventListener("progress", progressHandler, false);
                xhr.addEventListener("load", completeHandler, false);
                xhr.addEventListener("error", errorHandler, false);
                xhr.addEventListener("abort", abortHandler, false);

                return xhr;
              },
                url: window.location.href,// to allow add and edit
                type: "POST",
                data: post_data,
                processData: false,
                contentType: false,
                success: function(result) {
                    window.location.replace("/admin/yourapp/yoursupermodel/");
              }
            });
        });
    });
});  
})(django.jQuery);

在你的admin.py中

class YouSuperModelAdmin(admin.ModelAdmin):
    ...
    class Media:
        js = ['/static/js/progress_bar.js']
    ...

正在进行中\u bar.js

(function($){   
$(function(){
    $(document).ready(function() {
        $( "#form_id" ).submit(function( event ) {
          event.preventDefault();

          var post_data = new FormData($("form")[0]);

          $.ajax({
              xhr: function() {
                var xhr = new window.XMLHttpRequest();
                var new_div = document.createElement('div');

                new_div.innerHTML = '<progress id="progressBar" value="0" max="100" style="width:300px;"></progress><h3 id="status"></h3><p id="loaded_n_total"></p>';
                document.getElementsByClassName('submit-row')[0].appendChild(new_div)

                xhr.upload.addEventListener("progress", progressHandler, false);
                xhr.addEventListener("load", completeHandler, false);
                xhr.addEventListener("error", errorHandler, false);
                xhr.addEventListener("abort", abortHandler, false);

                return xhr;
              },
                url: window.location.href,// to allow add and edit
                type: "POST",
                data: post_data,
                processData: false,
                contentType: false,
                success: function(result) {
                    window.location.replace("/admin/yourapp/yoursupermodel/");
              }
            });
        });
    });
});  
})(django.jQuery);

注意：为了避免成功后表单下出现html页面，您必须更改返回HttpResponse对象的视图，或者只需更改window.location

---

所述方法适用于django的任何表单。

是否有任何错误消息？从你的解释来看，恐怕没有人能帮忙。。。我也试过他们的demoApp，但也不起作用……我在Django项目中使用了你的解决方案，它马上就起作用了。然而，由于我对全栈开发世界是完全陌生的，我认为我现在有点太生疏了，无法理解这到底是如何工作的。目前，我的Django项目使用if方法=='POST'条件开始抓取文件输入HTML元素中附加的文件。当我用省略的event.preventDefault（）添加代码时；行，我的网站已开始将这些文件保存在指定位置的2份副本中。这让我非常困惑，因为我没有在你的函数中的任何地方指定保存的位置。如果你不介意的话，请解释一下，或者将我发送到适当的资源，在我声明var xhr=new window.XMLHttpRequest（）并添加一些事件侦听器以获得进展、成功和，失败等等？Ajax是否为文件传输创建了一个辅助流，它是否通过HTML表单与标准POST方法并行？我在Django中编写的用于处理这些文件的后端代码是否仍在执行？@Greem666 Sory表示延迟。希望这对任何人都有帮助。XMLHttpRequest对象有助于与服务器交互。正如我在回答中所解释的，我们正在使用event.preventDefault（）阻止默认表单提交；如果我没记错的话，那么使用相同的django逻辑，您将在响应中获得html主体，因此如果您希望使用重定向，您可以更新您的admin.py，以便在所需的视图中进行重定向@乌尔德姆。您的示例代码非常适合在上传到S3时实例化django中的进度条，但是它似乎太快了，并且在文件实际上传和页面重定向之前会说100%上传了5-10秒。你知道为什么会这样吗？