如何使用FormData AJAX文件上传?

为了正确使用表单数据，您需要执行2个步骤。

准备工作

您可以将整个表单交给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请求，就像你用enctype="multipart/form-data"提交常规表单一样

更新:如果选项中没有type:"POST"，这个请求就不能工作，因为所有文件都必须通过POST请求发送。

注意: contentType: false仅适用于从jQuery 1.6开始

我不能在上面加上评论，因为我没有足够的声誉，但上面的答案对我来说几乎是完美的，除了我必须加上

类型:“文章”

到.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
})

<form id="upload_form" enctype="multipart/form-data">

jQuery与CodeIgniter文件上传:

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('<img src="' +
base_url +
'"asset/images/ajax-loader.gif" />');
//$(".modal .ajax_data").html("<pre>Hold on...</pre>");
$(".modal").modal("show");
},
success: function(msg) {
$(".modal .ajax_data").html("<pre>" + msg +
"</pre>");
$('#close').hide();
},
error: function() {
$(".modal .ajax_data").html(
"<pre>Sorry! Couldn't process your request.</pre>"
); //
$('#done').hide();
}
});

你可以用。

var form = $('form')[0];
var formData = new FormData(form);
formData.append('tax_file', $('input[type=file]')[0].files[0]);

或

var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]);

两者都可以。

View:
<label class="btn btn-info btn-file">
Import <input type="file" style="display: none;">
</label>
<Script>
$(document).ready(function () {
$(document).on('change', ':file', function () {
var fileUpload = $(this).get(0);
var files = fileUpload.files;
var bid = 0;
if (files.length != 0) {
var data = new FormData();
for (var i = 0; i < files.length ; i++) {
data.append(files[i].name, files[i]);
}
$.ajax({
xhr: function () {
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function (e) {
console.log(Math.floor(e.loaded / e.total * 100) + '%');
};
return xhr;
},
contentType: false,
processData: false,
type: 'POST',
data: data,
url: '/ControllerX/' + bid,
success: function (response) {
location.href = 'xxx/Index/';
}
});
}
});
});
</Script>
Controller:
[HttpPost]
public ActionResult ControllerX(string id)
{
var files = Request.Form.Files;
...

$('#form-withdraw').submit(function(event) {


//prevent the form from submitting by default
event.preventDefault();






var formData = new FormData($(this)[0]);


$.ajax({
url: 'function/ajax/topup.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
if(returndata == 'success')
{
swal({
title: "Great",
text: "Your Form has Been Transfer, We will comfirm the amount you reload in 3 hours",
type: "success",
showCancelButton: false,
confirmButtonColor: "#DD6B55",
confirmButtonText: "OK",
closeOnConfirm: false
},
function(){
window.location.href = '/transaction.php';
});
}


else if(returndata == 'Offline')
{
sweetAlert("Offline", "Please use other payment method", "error");
}
}
});






});

早上好。

我有同样的问题，上传多个图像。解决方案比我想象的更简单:在名称字段中包含[]。

<input type="file" name="files[]" multiple>

我没有对FormData做任何修改。

$(document).ready(function () {
$(".submit_btn").click(function (event) {
event.preventDefault();
var form = $('#fileUploadForm')[0];
var data = new FormData(form);
data.append("CustomField", "This is some extra data, testing");
$("#btnSubmit").prop("disabled", true);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "upload.php",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
console.log();
},
});
});
});

最好使用本地javascript通过id查找元素，如:< em > . getelementbyid (yourFormElementID) < / em >。

$.ajax( {
url: "http://yourlocationtopost/",
type: 'POST',
data: new FormData(document.getElementById("yourFormElementID")),
processData: false,
contentType: false
} ).done(function(d) {
console.log('done');
});