Öncelikle merhaba.
Yapılan her projede bir dosya yüklemi kesinlikle oluyor. Bildiğiniz gibi bir çok dosya yükleme eklentisi mevcut. Bunlardan en çok bilineniyse ck-editörün eklentileridir. Tabi bu eklentilerinde kendi içerisinde açıklar bulunmaktadır. Ben genelde admin paneli için kedi yazdığım dosya yükleme apilerini kullanıyorum. Bu sizlere de bunları tavsiye ederim. Örneğin bu yazımda anlatacağım dosya yükleme kodlarını kendi güvenlik önlemlerinizi alarak kullana bilirsiniz.
Bu örnekte resim yükleme işlemini sayfa yenilemeden ve boyutlandırma yaparak sunucuya yükleme işlemini anlatacağım. Eklentiyi test ettim, çalışıyor. Örnek ekran çıktısı aşağıdaki gibi olacaktır.
Çok basite indirgenmiş bir şekilde ve kullanılabilecek durumdadır. Ajax ile formdan aldığımız verileri resimYukle.php sayfasına gönderiyoruz. Resmi seçtikten sonra resmin adını elle girebiliyoruz. Türkçe karakter ve boşlukları oluşturduğumuz bir fonksiyonla düzenliyoruz. Resim adı verilmezse kendi randum bir resim adı oluşturuyor. Aynı zamanda SEO için önemli olan, resim başlığı ve alt başlık bilgilerini verebiliyoruz. Boyutlandırmaya gelince, en boy bilgileri range aracı ile veriyoruz. Eğer ikisini de verirseniz verilen boyutlarda, sadece bir değer verirseniz ise o değere bağlı olarak orantılı bir şekilde küçültüyor. Yapılan işlemleri kod bölümünde daha ayrıntılı bir şekilde açıkladım. Faydalı olası dileğiyle BAŞARILAR.
NOT: Scriptleri koyduğumuz sayfaya img dosyasını oluşturmayı unutmuyoruz!
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <!--Çağlar BOSTANCI--> <!--php-ajax ile resim yükleme--> <html lang="tr"> <head> <meta charset="utf-8" /> <title>www.caglarbostanci.com.tr</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h2>Php-Ajax Dosya Yükleme Formu</h2> <form onSubmit="return false" name="dosyukle" id="dosyukle" enctype="multipart/form-data"> <input type="file" name="dosya" id="dosya" /><br/> <input type="text" name="resimAdi" placeholder="Resimi Adı" /><br/> <input type="text" name="resimTitle" placeholder="Resim Başlık" /><br/> <input type="text" name="resimAlt" placeholder="Resim Alt Başlık" /><br/> <input type="range" onChange="document.getElementById('rangeVeriY').innerHTML=this.value" step="50" min="0" max="2000" value="0" name="resYukseklik" id="resYukseklik" />Yükseklik :<span id="rangeVeriY">0</span>px<br /> <input type="range" min="0" max="2000" step="50" name="resGenislik" value="0" onChange="document.getElementById('rangeVeriX').innerHTML=this.value">Genişlik :<span id="rangeVeriX">0</span>px<br /> <input type="submit" id="resYukle" value="Yükle" /> </form> <br /> <div id="sonuc"></div> </form> <script type="text/javascript" language="javascript"> $(document).on("submit",'form[name="dosyukle"]',function() { var $data = new FormData(this); $.ajax({ url: "resimYukle.php", data: $data, dataType:'json' , contentType: false, processData: false, type: "POST", beforeSend: function(){ $("#sonuc").html("Dosya Yükleniyor"); }, success: function (upResSonuc) { if(upResSonuc.durum==false){ $("#sonuc").html(upResSonuc.icerik); }else{ $("#sonuc").html(upResSonuc.icerik+"<br/>"+upResSonuc.reslink); } } }); }); </script> </body> </html> |
resimYukle.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | /* Öncelikli olarak session konrol ve izinlerini bu alanda yapmanızı tavsiye ederim. */ //ajax ile gönderdiğmiz post işlemin sonucunun json formatın da alacağımız için bir dizi oluşturduk. $jsonDurum=array("durum"=>false,"icerik"=>"","reslink"=>""); //if ile bir dosya yüklemesinin olup olmadığını ve boş olup olmadığnı kontrol ettik. if(isset($_FILES["dosya"]["name"]) && !empty($_FILES["dosya"]["name"])){ //Bir saniye beklettik sleep(1); //Resim dosyasının kaydedileceği yolu belirledik $resimDosyaYol="img/"; //Resim adına girilen boşluk ve türkçe karaterleri düzenlemek için fonksiyon oluşturduk function baslikOlustur($text) { $text = str_replace(" ","-",trim($text)); $search = array('Ç','ç','Ğ','ğ','ı','İ','Ö','ö','Ş','ş','Ü','ü'); $replace = array('C','c','G','g','i','I','O','o','S','s','U','u'); $new_text =mb_strtolower( str_replace($search,$replace,$text)); return $new_text; } //Dosya forrmatının kontrol ettmek için bir dizi oluşturduk. $veriTurleri=array("jpg"=>"image/jpeg","png"=>"image/png","gif"=>"image/gif"); //Post edilen dosya tipinin izin verilen dosya uzantı dizisinde olup olmadığını kontrol ettik. if(in_array($_FILES["dosya"]["type"],$veriTurleri)){ //Yükleme esnasında bir hata oluşmadıysa 0 değeri dönecek ve yükleme işlemi başlayacak if($_FILES["dosya"]["error"]==0){ //Yüklenecek dosyanın boyutunu kb cinsinden hesapladık. $veriBoyut=($_FILES["dosya"]["size"]/1024); //Dizi içerisinden dosya tipini arattık ve o tipe ait olan dosya uzatınsını index değerini aldık. $veriUzanti=array_search($_FILES["dosya"]["type"],$veriTurleri); //Yüklenen dosyanın 3 mb dan küçük olup olmadığını kontrol ettik. if($veriBoyut<3000){ //Post edilirken her hangi bir resim adı belirtilip belirtilmediğini kontrol ettik. if(isset($_POST["resimAdi"]) and !empty($_POST["resimAdi"])){ //Belirtilen dosya adını türkçe karakterlerden ve boşluktan arındırdık. $resimAdi=baslikOlustur($_POST["resimAdi"]).".".$veriUzanti; }else{ //Dosya adı belitilmemişse RES öntakı ile bir randum resim adı olupturduk ve sonuna uzantısını ekledik. $resimAdi="RES".substr(md5(rand(0,100000)),0,10).".".$veriUzanti; } //Formda bir resim alt başlığı belirtilip belirtilmediğini kontrol ettik. if(isset($_POST["resimAlt"]) && !empty($_POST["resimAlt"])){ //Belirtilen altbaşlığı temizleyip değişkene atadık. $resimAlt=htmlentities(trim($_POST["resimAlt"])); }else{ //Alt başlık belirtilmemişse boş deger atadık. $resimAlt=""; } //Formda resim başlığı belirtilmiş mi onu kontrol ettik. if(isset($_POST["resimTitle"]) && !empty($_POST["resimTitle"])){ //Belirtilen başlığı temizleyerek değişkene atadıki. $resimTitle=htmlentities(trim($_POST["resimTitle"])); }else{ //Resim başlığı belirtilmediyse boş değer atadık. $resimTitle=""; } //Temp de bulunan dosyamızı belirtiğimiz dizine kopyaladık ve sonucunu bir değişkene atadık. $dosVeriDurum=move_uploaded_file($_FILES["dosya"]["tmp_name"],$resimDosyaYol.$resimAdi); //Resim yükleme işlemenin kontrolünü yaptık. if($dosVeriDurum){ //Yüklenen resimin yolunu bir değişkene atadık. $dosyaAdres = $resimDosyaYol.$resimAdi; //Yüklenen resimin gerçek boyutunu ilgili değişkenlere atadık. list($mevcutGenislik, $mevcutYukseklik) = getimagesize($dosyaAdres); if($_POST["resYukseklik"]>0 || $_POST["resGenislik"]>0){ //Resme bir yükseklik belirtilmiş mi kontrolünü yaptık. if(isset($_POST["resYukseklik"]) && !empty($_POST["resYukseklik"]) && is_numeric($_POST["resYukseklik"]) && $_POST["resYukseklik"]>0 ){ //Belirtilen boyutu bir değişkene atadık. $resYukseklik =floor(trim($_POST["resYukseklik"])); } //Resme bir genişlik verilmişmi onun kontrolünü yaptık. if(isset($_POST["resGenislik"]) && !empty($_POST["resGenislik"]) && is_numeric($_POST["resGenislik"]) && $_POST["resGenislik"]>0){ //Belirtilen genişliği bir değişkene atadık. $resGenislik = floor(trim($_POST["resGenislik"])); } //Yüklenen resme hem yükseklik hem de genişlik belirtilmişmi onun kontorlünü yaptık. if(isset($resYukseklik) && isset($resGenislik)){ }else if(isset($resYukseklik)){ //Resme sadece yükseklik verilmiş ise oratılı bir şekilde küçültme işlemi yatık ve genişliği bulduk. $resGenislik = round(($mevcutGenislik * $resYukseklik) / $mevcutYukseklik); }else if(isset($resGenislik)){ //Resme sadece genişlik verilmiş ise oratılı bir şekilde küçültme işlemi yapmak için yüksekliği bulduk. $resYukseklik = round(($mevcutYukseklik * $resGenislik) / $mevcutGenislik); } //Boyut değişimi yapacağımız resmi en/boy ile oluşturduk. $resHedef = imagecreatetruecolor($resGenislik, $resYukseklik); //Düzenleyeceğimiz resmi bir değişkene atadık. $resMevcut= imagecreatefromjpeg($dosyaAdres); //Resimi yeniden boyutlandırdık. imagecopyresampled($resHedef, $resMevcut, 0, 0, 0, 0, $resGenislik, $resYukseklik, $mevcutGenislik, $mevcutYukseklik); //Boyutlandırdığımız resmi tekrar kaynak resmin üzerine kayıt ettik. imagejpeg($resHedef,$dosyaAdres); } /* Tabi yüklenen her veriyi veri tabanına kayıt etmek lazım. Arzu ederseniz bu alanda resimin veri tabanı kayıt işlemlerini yapabilirsiniz. */ //Sonuc olarak ekrana basılacak içerik bilgisini oluşturduk. :) Bu kadar. $jsonDurum["reslink"]='<img src="'.$resimDosyaYol.$resimAdi.'" title="'.$resimTitle.'" alt="'.$resimAlt.'" />'; $jsonDurum["durum"]=true; $jsonDurum["icerik"] ="<br> <strong>Yüklenecek Resmin Adı :</strong>".$_FILES["dosya"]["name"]."<br /> <strong>Yüklenecek Resmin Tipi :</strong>".$_FILES["dosya"]["type"]." <br/> <strong>Yüklenecek Resmin Ölçeği :</strong>".$mevcutGenislik."x".$mevcutYukseklik." <br/> <strong>Yüklenecek Resmin Boyutu :</strong>".number_format($veriBoyut,2,",",".")." kb <br/> <strong>Yüklenen Resmin Adı :</strong>".$resimAdi."<br/> <strong>Yüklenen Resmin Uzantısı :</strong>".$veriUzanti."<br/> <strong>Yüklenen Resmin Başlığı :</strong>".$resimTitle."<br/> <strong>Yüklenen Resmin Alt Başlığı :</strong>".$resimAlt."<br/> <strong>Yüklenen Resmin Boyutu :</strong>".number_format((filesize($resimDosyaYol.$resimAdi)/1024),2,",",".")." kb<br/> <strong>Yüklenen Resmin Ölçeği :</strong>".(isset($resGenislik) ? $resGenislik:$mevcutGenislik)."x".(isset($resYukseklik) ? $resYukseklik:$mevcutYukseklik)." px<br/> "; echo json_encode($jsonDurum); }else{ $jsonDurum["icerik"]= "İstenilen resim yüklenemedi"; echo json_encode($jsonDurum); } }else{ $jsonDurum["icerik"]= "Belirtilen boyutu aştı"; echo json_encode($jsonDurum); } }else{ $jsonDurum["icerik"]= "Dosya yüklenirken bir hata oluştu"; echo json_encode($jsonDurum); } }else{ $jsonDurum["icerik"]= "Beklenilen bir dosya değil"; echo json_encode($jsonDurum); } }else{ $jsonDurum["icerik"]= "Her hangi bir post işlemi olmadı"; echo json_encode($jsonDurum); } |