Etiket: Anlık

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.

Facebook Tarzı Anlık Geçen Süre

Facebooktaki gibi geçen zamanı anlık olarak görebilirsiniz.

Öncelikle jquery ve timeago kütüphanelerini script tagı ile çağırmalısınız.

Markdown
2 lines
https//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://timeago.yarp.com/jquery.timeago.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Hemen altına script tagı içerisinde bu kodları ekleyin.

JavaScript
31 lines
$.extend($.timeago, {
    settings: {
      refreshMillis: 1000,
      allowPast: true,
      allowFuture: false,
      localeTitle: false,
      cutoff: 0,
      strings: {
        prefixAgo: null,
        prefixFromNow: null,
        suffixAgo: "önce",
        suffixFromNow: "şimdi",
        inPast: 'sonra',
        seconds: "%d saniye",
        minute: "1 dakika",
        minutes: "%d dakika",
        hour: "1 saat",
        hours: "%d saat",
        day: "1 gün",
        days: "%d gün",
        month: "1 ay",
        months: "%d ay",
        year: "1 yıl",
        years: "%d yıl",
        wordSeparator: " ",
        numbers: []
      }
    }});
jQuery(document).ready(function() {
  jQuery("abbr.timeago").timeago();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Görünmesini istediğiniz yerde ise bu kodu kullanabilirsiniz.

PHP
1 lines
<abbr class="timeago" title="<?php echo date("c", time()); ?>">Hesaplanıyor</abbr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX