Django JQuery Ajax文件上传

我一直试图上传一个简单的文本文件几个小时，但我似乎仍然无法让它工作。

我一直收到无效的表格，说我错过了“file_source”。

为什么“file_source”没有发布？

我还得到它实际发送“file_source”但它仍然说它丢失了。 应该为Django FileFiled提供什么类型的元素？

Django表格：

class FileUploadForm(forms.Form): file_source = forms.FileField() 

Django模板（呈现表单）：

 
 {% csrf_token %} {{ form }} Upload  

JQuery / Ajax上传：

 function uploadFile() { $.ajax({ data: $(this).serialize(), type: $(this).attr('method'), url: $(this).attr('action') }); return false; } $(function() { $('#file-upload-form').submit(uploadFile); }); 

Django View哪个接收POST：

 def upload_view(request): if request.is_ajax(): form = FileUploadForm(request.POST) if form.is_valid(): print 'valid form' else: print 'invalid form' print form.errors return HttpResponseRedirect('/ingest/') 

Answer 1

这是我改变它以使其工作。

1. 我使用FormData打包表单中的数据

2. 注意Django视图中表单的参数。 我之前没有指定“文件”，这就是导致“需要文件字段”错误的原因。

使用Javascript：

 function upload(event) { event.preventDefault(); var data = new FormData($('form').get(0)); $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: data, cache: false, processData: false, contentType: false, success: function(data) { alert('success'); } }); return false; } $(function() { $('form').submit(upload); }); 

Django查看：

 def upload_view(request): if request.method == 'POST': form = FileUploadForm(data=request.POST, files=request.FILES) if form.is_valid(): print 'valid form' else: print 'invalid form' print form.errors return HttpResponseRedirect('/ingest/') 

Answer 2

除了使用Ajax到Django的文件之外，我们还可以发送json数据。

例：

JS使用表单数据

 var formData = new FormData(); formData.append('file1', myFile); const data_ = JSON.stringify(data) formData.append('data', data_); doPost(url, formData) .then(result => { }) 

Django使用request.FILES和request.POST

 data = json.loads(request.POST.get('data')) files = request.FILES attached_file1 = files.get('file1', None) attr1 = data.get('attr1', None) 

Answer 3

您不能使用jQuery异步上载文件。 您的选择是：

1.提交表格“通常的方式”。 当然，这将刷新页面。

2.使用XHR： https ： //developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest但要注意IE 8/9不支持它。 在这些浏览器上，您需要回退到iframe和发布到它的表单，以模仿异步上传。

3.使用https://github.com/blueimp/jQuery-File-Upload它执行我在2.中所描述的内容，但是为您节省了所有配置。