Question

我正在尝试使用django-progressbarupload app向我的Django应用添加进度条。但它不起作用.... django-progressbarupload app模板标签正常加载，文件也上传到服务器但进度条没有显示......并且它们在控制台上没有javascript错误...我已经按照tutorial

进行了操作

任何人都可以告诉如何向Django app添加进度条

Answer 1

这显然是基于webkit的浏览器中的一个错误，这是相关的主题：

Ajax form upload progress bar

此处还有相关的github问题：

https://github.com/ouhouhsami/django-progressbarupload/issues/2

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

Answer 2

它不是最好的解决方案（并不是那么一致），但它最容易实现。

创建js文件，例如progress_bar.js

在您的admin.py

中

class YouSuperModelAdmin(admin.ModelAdmin):
    ...
    class Media:
        js = ['/static/js/progress_bar.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);

我们的想法是阻止默认表单submition，创建新的XMLHttpRequest，使用消息注入进度条，然后发送显示该进程的数据。

设置 processData：false，contentType：false，非常重要，否则它将无法处理表单中的文件

最后在progress_bar.js中为进度条本身设置事件处理程序。

function _(el) {
  return document.getElementById(el);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";

}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}

注意：为了在成功后不要在表单下面出现html页面，您必须更改返回HttpResponse对象的视图或只是更改window.location。

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

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

2 个答案: