如何在POST上使用Ajax上传文件？
如何在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之外，所有数据都会返回。
我是不是做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-29 10:34:54
回顾过去，旧的答案是不切实际的，不被推荐。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
});阿西克斯文档
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文档
Stack Overflow用户
发布于 2017-06-22 19:52:01
下面的方法适用于我，它将以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请求中的更新数据。
正式文件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44708023
复制相关文章
相似问题
腾讯云开发者
