Anlık Çoklu Resim Yüklemek

index.php dosyası oluşturup jquery kütüphanemizi script tagı ile ekleyin.

http://code.jquery.com/jquery-1.10.2.js

style tagı içerisine bu kodları ekleyin.

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
color: #ffffff;
font-size: 14px;
font-weight: bold;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn-add {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-add:hover, .btn-add:focus, .btn-add:active, .btn-add.active {
color: #ffffff;
background-color: #3276b1;
border-color: #285e8e;
}

script tagı içerisine bu kodları ekleyin.

$(document).ready(function(){
 //Dosya Yükle
 $("#form").bind("submit",function(){
 $("#sonuclar").empty();
 $(this).attr("target","gelenBilgi");
 $("<img />").attr("src","yukleniyor.gif").appendTo($("#sonuclar")); 
 $("#gelenBilgi").bind("load", function(){
 var deger = $("#gelenBilgi").contents().find("body").html();
 $("#sonuclar").html(deger);
 $("#sonuclar2").val($("#sonuclar img").attr("src")); 
 });
 });
});
 var dosya = $("input[name=dosya[]]").val();
 var file = "dosya="+dosya;
 $.ajax({
 type: "POST",
 url: "dosyayukle.php",
 data: file,
 success: function(sonuc){
 $("#gelenBilgi").append(sonuc);
 }
 });

istediğiniz bir yere bu kodları ekleyin.

<table class="table">
 <tr>
 <td>
     <strong>Resim:</strong>
 </td>
 <td>
     <form action="dosyayukle.php" method="post" enctype="multipart/form-data" id="form"> 
        <input type="file" style="width:80px;" name="dosya[]" />
        <input type="submit" value="Yükle" />
     </form> 
 </td>
 <td rowspan="2" align="center">
    <iframe id="gelenBilgi" name="gelenBilgi" src style="display:none;">
    </iframe>
    <div id="sonuclar"></div>
 </td>
 </tr>
 <tr>
     <form action="" method="post"> 
         <td colspan="3" >
             <iframe id="gelenBilgi" name="gelenBilgi" src style="display:none;">
             </iframe>
             <input name="resim" id="sonuclar2" ><br>
             <input name="update" type="submit" class="btn btn-edit" value="Yüklenen url yi gönder" />
         </td>
    </form>
 </tr>
 </table>

yukleniyor.gif adlı bir resim oluşturun.

dosyayukle.php adlı bir dosya oluşturun ve içine bu kodları ekleyin.

<?php
 
function rasgeleharf($kackarakter){
	$s="";
	$char="abcdefghijklmnoprstuwvyzqx1234567890–__"; /// İzin verilen karakterler ?
	for ($k=1;$k<=$kackarakter;$k++){
		$h=substr($char,mt_rand(0,strlen($char)-1),1);
		$s.=$h;
	}
	return $s;
}
$toplam = count($_FILES["dosya"]["name"]);
$formatlar = array("image/png","image/jpeg","image/gif","image/bmp");
for($i= 0;$i < $toplam; $i++){
  if (in_array($_FILES["dosya"]["type"][$i],$formatlar)){
		$uzanti =substr($_FILES["dosya"]["name"][$i],-4,4);
		$ad =substr($_FILES["dosya"]["name"][$i],0,-4);
		$isim = rasgeleharf(5);
		$dizin = "img/".$ad."_".$isim.$uzanti;
		if(move_uploaded_file($_FILES["dosya"]["tmp_name"][$i],$dizin)){
			echo '<img height="100" src="'.$dizin.'" alt="" class="resim" />';
		}else{
			echo '<font color="red">Dosya Yüklenemedi!!</form>';
		}
	}else{
		echo '<font color="red">Geçersiz Dosya Formatı.</font>'; 
	}
}
?>

Son olarak img diye resimlerin saklanacağı bir klasör oluşturun.