如何使用其他数据单独上传多个文件

Question

我正在使用blueimp's fileupload。如果我不尝试在提交时发送额外的输入，则数据是可发送的。

我正在尝试按照此模式上传带有标题的文件：

1. 用户点击＆＃34;选择HH＆＃34;按钮选择文件

2. 选择并打开文件后，用户会看到行中列出的每个文件都带有＆＃34;标题＆＃34;输入框和＆＃34;提交＆＃34;按钮。

3. 用户输入＆＃34;标题＆＃34;的值输入并点击＆＃34;提交＆＃34;按钮发送到后端。

然而，在第3步之后，我收到403错误和＃34;禁止（CSRF令牌丢失或不正确。）＆＃34;在服务器端（django）。为什么我收到此错误消息以及如何解决此问题？

我用一个简单的对象替换了data.formData，以测试我在下面尝试完成的内容。

upload.js文件：

$('#fileupload').fileupload({
  formData: {title: 'test'},
  dataType: 'json',
  ...
  add: function (e, data) {
    var convertElem =   $('<input type="submit"/>').click(function() {
      data.formData = {"title":"test"}; 
      data.submit();
    });
    ...
    data.context = $(outerElem)
  ...
  }
});

upload.html：

<button>Select</button>
<form id="fileupload" data-url="{% url 'file-upload' %}" enctype="multipart/form-data" 
      data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
  <input id="fileupload-files" type="file" name="file" multiple>
</form>