Invio di file insieme ai dati del modulo tramite posta ajax

Sto cercando di caricare un file tramite ajax insieme ad alcuni campi in un modulo. Tuttavia, non funziona. Ho ricevuto questo errore.

Indice non definito: – File

Ecco il mio codice.

HTML

 

Ajax

 $("#add_product").click(function(e){ e.preventDefault(); product_name = $("product_name").val(); //d = $("#add_new_product").serialize(); $.ajax({ type: 'POST', url: 'ajax.php', data: $("#add_new_product").serialize(), success: function(response) { // alert(response); } }) }); 

PHP

 if (0 < $_FILES['file']['error']) { echo ":!"; } else { echo "ASa"; } 

Cosa mi manca qui?

Puoi provare a utilizzare FormData() :

 $("form#files").submit(function(){ var formData = new FormData($(this)[0]); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); 

Quanto sopra è un codice di esempio, ma puoi usarlo per modificarlo.

puoi usare FormData

 $("#add_product").click(function(e){ e.preventDefault(); var fdata = new FormData() fdata.append("product_name",$("product_name").val()); if($("#file")[0].files.length>0) fdata.append("file",$("#file")[0].files[0]) //d = $("#add_new_product").serialize(); $.ajax({ type: 'POST', url: 'ajax.php', data:fdata, contentType: false, processData: false, success: function(response) { // alert(response); } }) }); 
   

È necessario innanzitutto riconoscere che è necessario APPENDERE sia i dati di input modulo che i file modulo in una singola variabile FormData .

Ecco la mia soluzione in cui ho abilitato l’opzione Multi File in modo che questa soluzione possa adattarsi a tutti gli esempi.

È importante includere l’attributo name nei controlli di input per farlo funzionare correttamente sul lato server nella maggior parte dei casi. Se si utilizza C #, è ansible utilizzare semplicemente Request.Form [“nameAttribute”] per ottenere semplicemente la funzione. È simile per Java e altre lingue.

Il mio codice di esempio è

  $(document).ready(function () //Setting up on Document to Ready Function { $("#btnUpload").click(function (event) { //getting form into Jquery Wrapper Instance to enable JQuery Functions on form var form = $("#myForm1"); //Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later. var params = form.serializeArray(); //Getting Files Collection var files = $("#File1")[0].files; //Declaring new Form Data Instance var formData = new FormData(); //Looping through uploaded files collection in case there is a Multi File Upload. This also works for single ie simply remove MULTIPLE attribute from file control in HTML. for (var i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]); } //Now Looping the parameters for all form input fields and assigning them as Name Value pairs. $(params).each(function (index, element) { formData.append(element.name, element.value); }); //disabling Submit Button so that user cannot press Submit Multiple times var btn = $(this); btn.val("Uploading..."); btn.prop("disabled", true); $.ajax({ url: "Handler.ashx", //You can replace this with MVC/WebAPI/PHP/Java etc method: "post", data: formData, contentType: false, processData: false, success: function () { //Firing event if File Upload is completed! alert("Upload Completed"); btn.prop("disabled", false); btn.val("Submit"); $("#File1").val(""); }, error: function (error) { alert("Error"); } }); }); });