Przesyłanie obrazu AJAX z PHP z FormData

Question

Jestem stosunkowo nowy w funkcjach jQuery i Ajax, ale pracowałem z formularzami Ajax w ciągu ostatnich kilku dni. Jednak przy próbie załadowania zdjęć wystąpił problem z przesyłaniem plików. Szukając zasobów, nie mogłem znaleźć niczego przydatnego, ponieważ wydają się być zbyt skomplikowane z bezsensownymi dodatkami lub nie mają żadnego wyjaśnienia, co nie pomaga mi się dalej uczyć.

ja napisałem ten kod do obsługi przesyłania obrazu w 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) 
      } 
     }); 
    }); 
}); 

Ten wysyła żądanie do pliku upload.php, jednak żadne dane nie są przesyłane, w zasadzie moja forma jest dosłownie tak:

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

Żadne dane nie wydają się być przekazywane w nagłówkach i zakładam, że uzyskałem do niego dostęp poprzez PHP z tablicą $_POST['data'] lub $_FILES? Ktoś, kto ma lepszą wiedzę, pomóż nam to wyjaśnić, byłoby wspaniale zrozumieć to dalej. Dzięki.

Answer 1

To będzie pracować dla jednego lub wielu plików.

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

Następnie

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

Ale należy uważać, że using FormData doesn't work on IE before IE10

Answer 2

Spróbuj z tym:

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

Answer 3

Musisz ustawić processData i contentType w wywołaniu ajax (dodane również do id elementu input aby pobrać zawartość pliku).

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