我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上载吗？
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
如果可能，我需要填写数据部分吗？这是正确的方式吗？我只将文件POST到服务器端。
我一直在搜索，但我发现的是一个插件，而在我的计划中，我不想使用它。至少目前是这样。
当前回答
要上载用户使用jquery作为表单一部分提交的文件，请遵循以下代码：
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
然后将表单数据对象发送到服务器。
我们还可以将文件或Blob直接附加到FormData对象。
data.append("myfile", myBlob, "filename.txt");
其他回答
使用FormData。它工作得很好：-）。。。
var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit
$.ajax({
url: '/your-form-processing-page-url-here',
type: 'POST',
data: jform,
dataType: 'json',
mimeType: 'multipart/form-data', // this too
contentType: false,
cache: false,
processData: false,
success: function(data, status, jqXHR){
alert('Hooray! All is well.');
console.log(data);
console.log(status);
console.log(jqXHR);
},
error: function(jqXHR,status,error){
// Hopefully we should never reach here
console.log(jqXHR);
console.log(status);
console.log(error);
}
});
简单上载表单
<脚本>//表单提交$（“表单”）.submit（函数（evt）｛evt.preventDefault（）；var formData=新的formData（$（this）[0]）；$.ajax美元({url:'fileUpload'，类型：'POST'，data:formData，异步：false，缓存：false，contentType：false，enctype:'多部分/表单数据'，processData:false，成功：函数（响应）{警报（响应）；}});return false；});</script><!--上载表单--><表单><表><tr><td colspan=“2”>文件上载</td></tr><tr><th>选择文件</th><td><input id=“csv”name=“csv“type=“file”/></td></tr><tr><td colspan=“2”><input-type=“submit”value=“subject”/></td></tr></table></form>
这是我的代码
var formData = new FormData();
var files = $('input[type=file]');
for (var i = 0; i < files.length; i++) {
if (files[i].value == "" || files[i].value == null) {
return false;
}
else {
formData.append(files[i].name, files[i].files[0]);
}
}
var formSerializeArray = $("#Form").serializeArray();
for (var i = 0; i < formSerializeArray.length; i++) {
formData.append(formSerializeArray[i].name, formSerializeArray[i].value)
}
$.ajax({
type: 'POST',
data: formData,
contentType: false,
processData: false,
cache: false,
url: '/Controller/Action',
success: function (response) {
if (response.Success == true) {
return true;
}
else {
return false;
}
},
error: function () {
return false;
},
failure: function () {
return false;
}
});
2019年更新：
html
<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>
js
$(document).on('submit', '.fr', function(){
$.ajax({
type: 'post',
url: url, <--- you insert proper URL path to call your views.py function here.
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: new FormData(this) ,
success: function(data) {
console.log(data);
}
});
return false;
});
视图.py
form = ThisForm(request.POST, request.FILES)
if form.is_valid():
text = form.cleaned_data.get("text")
example_image = request.FILES['example_image']
无法通过AJAX上载文件。您可以上传文件，而无需使用IFrame刷新页面。您可以在此处查看更多详细信息。
更新
XHR2支持通过AJAX上传文件。例如，通过FormData对象，但遗憾的是，它不受所有/旧浏览器的支持。
FormData支持从以下桌面浏览器版本开始。
即10+Firefox 4.0+铬7+Safari 5+歌剧12+
有关详细信息，请参阅MDN链接。
