如何使用FormData进行AJAX文件上传？
如何使用FormData进行AJAX文件上传？
提问于 2014-01-10 20:47:34
这是我使用拖放功能动态生成的HTML。
file demoe 1
Text input
text_input
File Button
Button这是我的JavaScript代码：
$('.wpc_contact').submit(function(event){
var formname = $('.wpc_contact').attr('name');
var form = $('.wpc_contact').serialize();
var FormData = new FormData($(form)[1]);
$.ajax({
url : ''+'/wpc-contact-form/resources/js/tinymce.php',
data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
type : 'POST',
processData: false,
contentType: false,
success : function(data){
alert(data);
}
});
}回答 9
Stack Overflow用户
回答已采纳
发布于 2014-01-10 21:00:34
为了正确使用表单数据，您需要执行两个步骤。
准备工作
您可以将整个表单交给FormData()处理
var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);或者为FormData()指定确切的数据
var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);发送表单
使用jquery的Ajax请求将如下所示：
$.ajax({
url: 'Your url here',
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// ... Other options like success and etc
});在此之后，它将发送ajax请求，就像您提交常规表单一样
更新:此请求不能在以下情况下工作
在选项中，因为所有文件都必须通过POST请求发送。
注意：
仅可用
从jQuery 1.6开始
Stack Overflow用户
发布于 2014-10-13 11:24:14
我不能在上面添加评论，因为我没有足够的声誉，但上面的答案对我来说几乎是完美的，除非我必须添加
类型："POST“
.ajax调用。我抓了几分钟的头，试图找出我做错了什么，这就是它所需要的，并且起到了很好的效果。这就是完整的代码片段：
完全归功于我上面的答案，这只是一个小小的调整。这只是为了防止其他人被卡住，看不到明显的东西。
$.ajax({
url: 'Your url here',
data: formData,
type: "POST", //ADDED THIS LINE
// THIS MUST BE DONE FOR FILE UPLOADING
contentType: false,
processData: false,
// ... Other options like success and etc
})Stack Overflow用户
发布于 2015-08-27 14:47:07
jQuery with CodeIgniter file upload:
var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]);
$.ajax({
type: "POST",
url: base_url + "member/upload/",
data: formData,
//use contentType, processData for sure.
contentType: false,
processData: false,
beforeSend: function() {
$('.modal .ajax_data').prepend('');
//$(".modal .ajax_data").html("Hold on...");
$(".modal").modal("show");
},
success: function(msg) {
$(".modal .ajax_data").html("" + msg +
"");
$('#close').hide();
},
error: function() {
$(".modal .ajax_data").html(
"Sorry! Couldn't process your request."
); //
$('#done').hide();
}
});
you can use.
var form = $('form')[0];
var formData = new FormData(form);
formData.append('tax_file', $('input[type=file]')[0].files[0]);
or
var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]);
Both will work.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21044798
复制相关文章
相似问题