ajax image post ekleme
$("#file_upload").change(function(){ var file_button = $(this); var my_files = file_button.prop('files'); //file_upload id li elemanı al, file input //var my_files = document.getElementById("file_upload").files; if (my_files.length){ //seçilen eleman var ise var dataArray = []; /* dosyayı oluşturan verilerin ve isimlerinin bulunduğu dizi. Bu diziyi PHP tarafına post edeceğiz. PHP tarafında bu dizi üzerinde gerekli filtrelemeler yapılarak yüklenen dosyalarla ilgili geri dönüş sağlayacağız */ var file_length = my_files.length; //seçilen dosya sayısı for (var i = 0; i < file_length; i++) { //her bir dosya icin bu dongu calissin (function(file,counter) { if (file && file.type.match('image.*')){ // resim ise var name = file.name; //dosya isim var reader = new FileReader(); reader.onload = function(e) { var text = e.target.result; //dosya verisi var infos = [text,name]; dataArray.push(infos); //dataArray dizisine dosyanın verisi ve ismi olacak şekilde 2 elemanlı dizi ekle if (counter == file_length){ //sonuncu dosya da yuklendiyse dosya verilerini ajax ile post et. $.ajax({ //dosya data sını ajax.php ye postala url: "ajax.php", type: "POST", data: {"files" : dataArray}, dataType: "json", success: function(data) { //yuklenen her dosya icin mesaj bildirim veya resim bilgi dizisi doner if (data.length > 0){ for (var i = 0; i < data.length; i++){ if (data[i][0] == "success"){ //yuklenen resmin yuklendigi dizin bilgisiyle birlikte url yolunu ekle file_button.after('<br><br><hr><br><img src="'+data[i][1]+'" width="350px">'); }else{ //yuklenmeyen resmin ismi ve neden yuklenmedigini bildiren hata mesajını ekle file_button.after('<br><br><hr><br><strong>'+data[i][1]+'</strong> ==> '+data[i][0]); } } }else{ alert("Bir hata oluştu"); } } }); } } reader.readAsDataURL(file); //oku }else{ file_length--; } })(my_files[i],i+1); } } });
Source: muhammedyaman.com