Come utilizzare FormData per il caricamento di file Ajax

Questo è il mio html che sto generando dynamicmente usando la funzionalità di trascinamento della selezione.

file demoe 1

text_input

questo è il mio codice js …

  $('.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); } }); } 

Per l’utilizzo corretto dei dati del modulo è necessario eseguire 2 passaggi.

preparativi

È ansible fornire l’intero modulo a FormData () per l’elaborazione

 var form = $('form')[0]; // You need to use standard javascript object here var formData = new FormData(form); 

o specificare i dati esatti per FormData ()

 var formData = new FormData(); formData.append('section', 'general'); formData.append('action', 'previewImg'); // Attach file formData.append('image', $('input[type=file]')[0].files[0]); 

Invio modulo

La richiesta Ajax con jquery sarà simile a questa:

 $.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 }); 

Dopo questo invierà una richiesta enctype="multipart/form-data" come si invia modulo regolare con enctype="multipart/form-data"

Aggiornamento: questa richiesta non può funzionare senza type:"POST" nelle opzioni poiché tutti i file devono essere inviati tramite richiesta POST.

Nota: contentType: false disponibile solo da jQuery 1.6 in poi

Non posso aggiungere un commento sopra perché non ho abbastanza reputazione, ma la risposta di cui sopra è stata quasi perfetta per me, tranne che ho dovuto aggiungere

digitare: “POST”

alla chiamata .ajax. Mi stavo grattando la testa per qualche minuto cercando di capire cosa avevo fatto di sbagliato, questo è tutto ciò che serve e funziona a meraviglia. Quindi questo è l’intero frammento:

Pieno credito per la risposta sopra di me, questo è solo un piccolo ritouch a quello. Questo è nel caso in cui qualcun altro si blocca e non può vedere l’ovvio.

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

jQuery con caricamento file 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(''); //$(".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(); } });

Puoi usare.

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

o

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

Entrambi funzioneranno.

In realtà la documentazione mostra che è ansible utilizzare XMLHttpRequest().send() per inviare semplicemente dati multiforms nel caso in cui jquery succhi

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