Anlık Çoklu Resim Yüklemek

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

Markdown
1 lines
http://code.jquery.com/jquery-1.10.2.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

style tagı içerisine bu kodları ekleyin.

CSS
30 lines
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisine bu kodları ekleyin.

JavaScript
23 lines
$(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);
 }
 });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

istediğiniz bir yere bu kodları ekleyin.

HTML
29 lines
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

yukleniyor.gif adlı bir resim oluşturun.

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

PHP
29 lines
<?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>'; 
    }
}
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Sizin Değerli Görüşlerinize İhtiyacımız Var.