Как использовать 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]); 

Форма отправки

Запрос Ajax с jquery будет выглядеть так:

 $.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

Я не могу добавить комментарий выше, поскольку у меня недостаточно репутации, но этот ответ был почти идеальным для меня, за исключением того, что мне пришлось добавить

type: "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 }) 

 <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 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"); } } }); }); 

Фактически Документация показывает, что вы можете использовать XMLHttpRequest().send() чтобы просто отправлять многомерные данные в случае, если jquery sucks