javascript - 如何在 POST 上使用 Ajax 上传文件？

Question

我知道，这个主题并没有缺少主题，但请耐心等待。我想使用 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 函数的方式有问题，因为在 Debug模式下，除了 logo 之外的所有数据都会返回。

我做错了什么吗？

Answer 1

下面的方法对我有用，它将所有表单值提交为 serialize()。您将在 request.POST 和 Logo 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这里