如何在 POST 上使用 Ajax 上传文件？答案

【问题标题】：How to upload a file using Ajax on POST?如何在 POST 上使用 Ajax 上传文件？
【发布时间】：2017-06-22 19:39:08
【问题描述】：

我知道，这个主题并没有缺少主题，但请耐心等待。我想使用 Ajax 或等效工具将文件上传到服务器。

# html
<form method="post" id="Form" enctype="multipart/form-data">
  {% csrf_token %} # django security
  <input id="image_file" type="file" name="image_file">
  <input type="submit" value="submit">
</form>

# javascript
$(document).on('submit', '#Form', function(e){
  e.preventDefault();

  var form_data = new FormData();
  form_data.append('file', $('#image_file').get(0).files);

  $.ajax({
      type:'POST',
      url:'my_url',
      processData: false,
      contentType: false,
      data:{
          logo:form_data,
          csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), # django security
      },
  });
});

# views.py (server side)
def myFunction(request):
    if request.method == 'POST':
        image_file = request.FILES
        ...
...

我猜我配置 ajax 函数的方式存在问题，因为在调试模式下，除了logo 之外的所有数据都会返回。

我是不是做错了什么？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

以下方法适用于我，它将所有表单值提交为serialize()。您将在request.POST 和徽标request.FILES 中获得所有表单输入

试试这个：

$(document).on('submit', '#creationOptionsForm', function(e){
  e.preventDefault();

  var form_data = new FormData($('#creationOptionsForm')[0]);
  $.ajax({
      type:'POST',
      url:'/designer/results/',
      processData: false,
      contentType: false,
      async: false,
      cache: false,
      data : form_data,
      success: function(response){

      }
  });
});

更新：

基本上async:false 将执行ajax 请求并停止执行进一步的js 代码，直到时间请求完成，因为上传文件可能需要一些时间才能上传到服务器。

而cache 将强制浏览器不缓存上传的数据以获取 ajax 请求中的更新数据

Official Documentation这里

【讨论】：

你不再需要async: false（相反：如果你设置它，你会在Chrome控制台中收到警告）
主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助，请查看xhr.spec.whatwg.org。

【解决方案2】：

回想起来，旧的答案是不切实际的，不推荐。 asnyc: false 暂停整个 Javascript 以简单地上传文件，您可能会在上传期间触发其他函数。

如果您使用 JQuery 只是为了使用 ajax，那么我建议使用 axios：

const axios = require('axios');

var formData = new FormData();
formData.append('imageFile', document.querySelector('#image_file').files[0]);

axios({
    method: 'post',
    url: 'your_url',
    data: formData,
    headers: {
        "X-CSRFToken": CSRF_TOKEN, # django security
        "content-type": "multipart/form-data"
    }
}).then(function (response) {
    # success
});

Axios 文档

Jquery/Ajax 答案：

var formData = new FormData();
formData.append('imageFile', $('#image_file')[0].files[0]);
formData.append('csrfmiddlewaretoken', CSRF_TOKEN); # django security

$.ajax({
   url : 'your_url',
   type : 'POST',
   data : formData,
   processData: false,
   contentType: false,
   success : function(data) {
       # success
   }
});

Jquery/Ajax 文档

【讨论】：