Question

我在html中有一个文件上传表单，我正试图通过ajax调用上传文件（和要显示的文件大小）。我正在使用django。每当我尝试做任何事情都没有任何反应。这是上传表格：

<form class="uploadForm" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <input type="file" id="uploadFile">
  <input type="submit" class="button" id="uploadButton" value="Upload">
</form>

这是我的Jquery + Ajax：

$('.uploadForm').on('submit', function(event){
  event.preventDefault();
  var fileSize = ($('#uploadFile')[0].files[0].size/1024);
  var fileName = $('#uploadFile')[0].files[0].name;
  var realSize = sizeConverter(fileSize);
  var fileData = new FormData($('#uploadFile')[0]);
  var csrfToken = '{{ csrf_token }}';
  $.ajax({
    url: '{% url 'project:uploadFile' %}',
    type: 'post',
    data: {
      'fileData': fileData,
      'fileSize': realSize,
      csrfmiddlewaretoken: '{{ csrf_token }}'
     },
    cache: false,
    processData: false,
    contentType: false,
    success: function(data){
      alert(data);
    }
  });
});

这是views.py：

class uploadFile(TemplateView):
template_name = "project/uploadFile.html"

def post(self, request):
    fileSize = request.POST.get('fileSize')
    fileData = request.FILES['fileData']
    return JsonResponse(fileSize, safe=False)

现在，在我提交表单时使用此设置没有任何反应。我在控制台中没有任何错误，没有。当我从数据中删除'fileData'并在Ajax中删除cache: false, processData: false, contentType: false,时，这是有效的（仅限文本）。我尝试将new FormData($('#uploadFile')[0]);更改为new FormData($('#uploadFile').get(0));，但这没有用。我猜这里的问题是使用fileData变量，但它有什么问题呢？感谢您的帮助。

由于

Answer 1

基于FormData()的文档，正确的方法是：

var formData = new FormData();
formData.append('fileSize', sizeConverter($('#uploadFile')[0].files[0].size/1024));
formData.append('file', $('#uploadFile')[0].files[0]);
formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
$.ajax({
    url: "{% url 'project:uploadFile' %}",
    type: 'post',
    data: formData,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data){
      alert(data);
    }
});

问题可能在$('#uploadFile')[0]。它应该是$('#uploadFile')[0].files[0]。此外，url语法包含引号错误。

Answer 2

我认为你需要在你的ajax中加入enctype: 'multipart/form-data'。并使用csrfmiddlewaretoken方法处理.append(..)。

$('.uploadForm').on('submit', function(event){
  event.preventDefault();

  var fileSize = $('#uploadFile')[0].files[0].size/1024;
  var fileName = $('#uploadFile')[0].files[0].name;
  var realSize = sizeConverter(fileSize);

  var fileData = new FormData($('#uploadFile').get(0));
  fileData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
  //fileData.append('fileData', fileData);
  fileData.append('realSize', realSize);

  $.ajax({
    url: "{% url 'project:uploadFile' %}",
    type: "POST",
    data: fileData,
    async: true,
    cache: false,
    processData: false,
    contentType: false,
    enctype: 'multipart/form-data',
    success: function(data){
      alert(data);
    }
  });
});

对于generic.TemplateView，您只实施了get方法。您应该实施post方法以允许发布表单或尝试使用generic.FormView。

Django ajax文件上传表单 - 文件无法上传

2 个答案: