我知道关于这个主题的主题并没有遗漏,这就是为什么我查看了关于这个主题的大量帖子,找不到令我满意的东西,所以我试图自己构建它.
我想要做的就是使用Djaxo使用Ajax上传文件以避免页面刷新.
这是我做的：
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配置正确,没有必要包含它们).
我想在调试(pdb)request.POST返回除logo之外的每个数据时,我对ajax.js的处理方式存在问题.
我在做什么吗？
解决方法
以下方法适用于我,它将所有表单值提交为serialize().您将在request.POST和logo request.FILES中获取所有表单输入
试试这个：
$(document).on('submit',function(e){
e.preventDefault();
var form_data = new FormData($('#creationoptionsForm')[0]);
$.ajax({
type:'POST',async: false,cache: false,data : form_data,success: function(response){
}
});
});
更新：
基本上async：false将执行ajax请求并停止执行更多js代码,直到时间请求完成,因为上传文件可能需要一些时间才能上传到服务器.
缓存将强制浏览器不缓存上传的数据以获取ajax请求中的更新数据
Official Documentation在这里