Caricamento immagine AJAX PHP con FormData

Question

Sono relativamente nuovo alle funzioni jQuery e Ajax, ma ho lavorato con i moduli Ajax negli ultimi giorni. Tuttavia, quando ho provato a caricare immagini, ho riscontrato un problema con i caricamenti di file. Mentre sono alla ricerca di risorse, non sono riuscito a trovare nulla di utile perché sembrano essere eccessivamente complicate da inutili comparse o non hanno alcuna spiegazione, il che non mi aiuta a imparare oltre.

Ho scritto questo codice per gestire il caricamento delle immagini in Ajax:

$(function() { 
    $('.input_photo').on("change",function() {        
     var formData = new FormData($('form.upload-form')); 

     $.ajax({ 
      url: "upload.php", 
      type: "POST", 
      data: formData, 
      success: function (msg) { 
       alert(msg) 
      } 
     }); 
    }); 
}); 

Questo invia una richiesta al file upload.php, tuttavia i dati non vengono inviati, in fondo la mia forma è letteralmente questo:

<form class="upload-form"> 
    <input type="file" name="input_photo" class="input_photo" /> 
</form> 

Nessun dato sembra essere passato nelle intestazioni e presumo che accetterei l'accesso tramite PHP con l'array $_POST['data'] o $_FILES? Qualcuno con una conoscenza migliore, per favore, aiuta a spiegarlo, sarebbe bello capirlo ulteriormente. Grazie.

Answer 1

questo lavoro per uno o più file.

$('input:file').on('change', function() { 

var data = new FormData(); 

//Append files infos 
jQuery.each($(this)[0].files, function(i, file) { 
    data.append('file-'+i, file); 
}); 

$.ajax({ 
    url: "my_path", 
    type: "POST", 
    data: data, 
    cache: false, 
    processData: false, 
    contentType: false, 
    context: this, 
    success: function (msg) { 
      alert(msg); 
     } 
    }); 
}); 

Poi

$_FILES['file-0'] 
$_FILES['file-1'] 
[...] 

Ma attenzione che using FormData doesn't work on IE before IE10

Answer 2

prova con questo:

var formData = $('form.upload-form').serialize(); 

Answer 3

È necessario impostare processData e contentType nella vostra chiamata AJAX (anche aggiunto id per il vostro elemento input al fine di recuperare il contenuto del file).

HTML

<form class="upload-form"> 
     <input type="file" id="photo" name="input_photo" class="input_photo" /> 
    </form> 

JS

$(function() { 
     $('.input_photo').on("change",function() {  
      var file = document.getElementById("photo").files[0]; //fetch file 
      var formData = new FormData();      
      formData.append('file', file); //append file to formData object 

      $.ajax({ 
       url: "upload.php", 
       type: "POST", 
       data: formData, 
       processData: false, //prevent jQuery from converting your FormData into a string 
       contentType: false, //jQuery does not add a Content-Type header for you 
       success: function (msg) { 
        alert(msg) 
       } 
      }); 
     }); 
    });