PHP FormAlt ile AJAX Resim Yükleme

Question

JQuery ve Ajax işlevlerinde nispeten yeniyim, ancak son birkaç gündür Ajax formlarıyla çalışıyorum. Ancak, resim yüklemeye çalışırken dosya yüklemeleriyle ilgili bir sorunla karşılaştım. Kaynakları ararken, yararlı hiçbir şey bulamadım çünkü bunlar anlamsız ekstralarla aşırı derecede karmaşık görünüyorlar ya da herhangi bir açıklama yapmıyorlar, bu da daha fazla bilgi edinmeme yardımcı olmuyor.

Ben Ajax Resim yükleme işlemek için bu kodu yazdım adres:

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

: Bu upload.php dosyaya bir istek gönderir

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

Ancak hiçbir veri temelde benim form anlamıyla şudur, gönderilen

Başlıklarda hiçbir veri iletilmiyor gibi görünüyor ve ben $_POST['data'] dizisi veya $_FILES ile PHP aracılığıyla erişebileceğimi varsayalım? Daha iyi bilgiye sahip biri lütfen bunu açıklamaya yardımcı olun, bunu daha iyi anlamak harika olur. Teşekkürler.

Answer 1

Bu bir ya da birden fazla dosya için çalışacaktır.

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

Sonra

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

Ama sadece mesaj verilerini oluşturan using FormData doesn't work on IE before IE10

Answer 2

bununla deneyin:

Sen ajax çağrısında processData ve contentType ayarlamanız gerekir

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

Answer 3

(ayrıca dosya içeriği alınmaya sırayla input elemana id eklendi).

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