如何在Django网站中添加文件上传进度条

Question

如何在Django网站中添加文件上传进度条

3

我正在尝试使用django-progressbarupload app为我的Django应用程序添加进度条。但是它没有起作用.... django-progressbarupload app模板标签已经成功加载，文件也上传到服务器，但进度条没有显示...控制台上也没有JavaScript错误...我已经按照这个教程进行了操作。

请问有人可以告诉我如何为Django应用程序添加进度条吗？

- Vaibhav Jain

你有任何错误信息吗？从你的解释中，恐怕没有人能够帮助:/ - user1593705

我也尝试了他们的demoApp，但它也没有起作用... - Vaibhav Jain

3个回答

2

这显然是基于webkit的浏览器中的一个bug，以下是相关讨论：Ajax form upload progress bar。此外，这里还有相关的github问题：https://github.com/ouhouhsami/django-progressbarupload/issues/2。

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

- mariodev

-1

只需传递您的上传URL `django_upload_url`

  <!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>File Uploader</title>
      <link href="https://releases.transloadit.com/uppy/v2.2.3/uppy.min.css" rel="stylesheet">
    </head>
    <body>
    <button data-toggle="modal" data-target="#UploaderModal"><strong>Upload Files</strong></button>
    <div class="modal" id="UploaderModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Upload Files</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
            <div id="drag-drop-area"></div>
          </div>
      </div>
    </div>
  
      <script src="https://releases.transloadit.com/uppy/v2.2.3/uppy.min.js"></script>
      <script>
        var uppy = new Uppy.Core()
          .use(Uppy.Dashboard, {
            inline: true,
            proudlyDisplayPoweredByUppy:false,
            target: '#drag-drop-area',
            showProgressDetails: true,
            width: 1000,
          })
          .use(Uppy.XHRUpload, {
              endpoint: '{% url 'django_upload_url'  %}',
              headers: {'X-CSRFToken': " {{csrf_token}} "},
              formData: true,
              fieldName: "file",
              limit:1
          })
        uppy.on('complete', (result) => {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
          location.reload();
        })
      </script>
    </body>
  </html>

使用进度条在Django中上传多个文件

- Try2Code

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- urDMG · Accepted Answer

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

创建 JavaScript 文件，例如 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);

这个想法是防止默认表单提交，创建新的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网站中添加文件上传进度条

只需传递您的上传URL django_upload_url

只需传递您的上传URL `django_upload_url`