javascript - 使用 Ajax 驱动的进度条上传 Django 文件

Question

我是 Django 的新手，甚至是 JavaScript 的新手，所以请原谅我的新手问题。情况是这样的:

1) 我有一个用于文件上传的网站，用 Django 编码，其中一些逻辑如下所示:

def page_query(request):
    ...
    if request.method == 'POST':
       ...
       file_entry = file_form(request.POST, request.FILES)

       if file_entry.is_valid():
           if request.FILES.get('filename', False) != False:
               f = request.FILES['filename']
               fname = time_id + '_' + case_id + '_.ext'
               file_check = data_admin.upload_file(f, fname, upload_path)
               upload_file_path = os.path.join(upload_path, fname)

data_admin.upload_file() 是我项目的另一个模块中定义的自定义函数，函数归结为:

with open(upload_path + fname, 'wb+') as destination:
    for chunk in f.chunks():
        destination.write(chunk)

2) 我想在我的网站上添加某种上传进度指示，在很多资源中我看到人们推荐 jQuery 的 Ajax 解决方案，归结为以下代码:

$(document).ready(function() {

  $('#form_id').on('submit', function(event) {
    // event.preventDefault();

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

    $.ajax({
        xhr: function() {
          var xhr = new window.XMLHttpRequest();

          xhr.upload.addEventListener("progress", function(evt) {
            var percent = Math.round(evt.loaded/evt.total * 100)
            console.log(percent)
            $('#complaint_query_button').attr('disabled', true)
            $('#complaint_query_button').get(0).innerText = "Upload status: " + percent + '%'
          }, false);

          xhr.upload.addEventListener("load", function(evt) {
            $('#complaint_query_button').css('background-color', 'green').delay(2000)
            $('#complaint_query_button').get(0).innerText = "COMPLETE, refreshing..."
            // setTimeout(location.reload.bind(location), 10000);

          }, false);

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

上面的解决方案对我来说就像一个魅力，我有一个提交按钮，它指示上传在 %s 中的进度，但是，我认为我不完全理解所有这些都在发生什么。 我看到文件输入 HTML 元素中附加的文件被两次上传到我在服务器上的目的地。此外，Ajax 命令在提交按钮上指示的上传进度与我浏览器的上传进度不一致信息显示在页面的左下角。 我真的对上面的内容感到困惑 - 我是否创建了 2 个上传流(一个使用 Django，另一个使用 Ajax)？我怎样才能调和它们？ 我愿意接受关于如何处理这个问题的建议，或者也许有一个 Django 本地模块负责文件上传进度？

谢谢。

2018 年 9 月 19 日更新 仍然没有运气弄清楚这个。任何愿意找时间与我分享意见的人都将有义务。为无耻的暴涨道歉。

Answer 1

好吧，在对此事进行了大量的反复试验之后，我终于解决了这个问题——url 参数必须从“window.location.href”更改为“#”，以及我在上面描述的所有问题立刻停了下来。在 views.py 的 page_query 函数中添加 POST 方法 block 末尾的 JSON 响应后，我最终得到了一个网站，该网站可以进行文件传输并向用户更新上传状态，而无需在之后重新呈现每次提交表单。

很想向比我更有知识的人学习，那里的这个“#”符号到底有什么用，因为它改变了我的游戏规则。