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

Question

我知道这个话题并不缺少这个话题，这就是为什么我研究了大量关于这个话题的帖子，并且找不到满足我的东西，所以我试图自己构建它。

所有我想要做的就是使用Ajax和Django以避免页面刷新上传文件。

这里就是我所做的：

basic_upload.html：

<form method="post" id="creationOptionsForm" enctype="multipart/form-data"> 
{% csrf_token %} 

<div> 
    {{ form.name.errors }} 
    {{ form.name }} 
</div> 

<div> 
    {{ form.email.errors }} 
    {{ form.email }} 
</div> 

<div> 
    {{ form.logo.errors }} 
    {{ form.logo }} 
</div> 

<input type="submit" value="submit"> 
</form> 

Ajax.js：

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

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

    $.ajax({ 
     type:'POST', 
     url:'/designer/results/', 
     processData: false, 
     contentType: false, 
     data:{ 
      organisation:$('#id_organisation').val(), 
      email:$('#id_email').val(), 
      logo:form_data, 
      csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), 
     }, 
    }); 
}); 

Views.py：

def creationResult(request): 
    if request.method == 'POST': 
     form = UserInfos(request.POST, request.FILES) 
     if form.is_valid(): 
      photo = form.save() 
      ... 
... 

（forms.py & urls.py配置正确，这是没有必要包括它们）。

我想有一个与我的ajax.js做，因为在调试(pdb) request.POST回报每DATAS除了logo方式的问题。

我在做什么？

Answer 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这里