onur.org — yazılım, internet teknolojileri ve yaşam.

İnternet üzerinde sayısız resim yükleme servisi olduğunun hepimiz farkındayız. Bilindiği üzere Türkiye’de sadece yükleme için yabancı hazır script kullanan siteler neredeyse %80′i buluyor ve gelirin gideri karşılamamasından dolayı siteler ve yüklediğiniz resimler kısa sürede yok oluyor. Bu sebepten dolayı hem resim upload hizmeti veren hem de genel siteler için PHP – jQuery tabanlı API yazmaya karar verdim. Kullanımı basit ve sorunsuz bir şekilde resimlerinizi yükleyebileceğiniz esnek bir yapı oluşturduğuma inanıyorum.

Uyarı!

Sunucunuzdaki php versiyonu minimum PHP5 olması gerekmektedir.

İçerik

• Sistem İşleyişi
• API Kullanımı
• api.html
  • api.html: CSS
  • api.html: Javascript
• islem.php
• tmp
• .htaccess

Demo
Dosyaları indirmek için tıklayınız.

Sistem İşleyişi

Dosyayı formdan yolladıktan sonra islem.php ile dosya içeriğini üç farklı aşamada süzüyor. Dosya uygun görülürse geçici klasörünüz olan “tmp” e aktarıp cURL ile resim.im’daki “http://api.resim.im/api?q=yukle” adresine istek yollayıp yükleme talebinde bulunuyor. Yükleme başarılıysa dosyanın ID bilgisi javascript ile “http://api.resim.im/yukle.js” dosyasındaki fonksiyona tetikleme yapıyor ve resim adreslerini JSON ile çektikten sonra geçici dosyayı siliyor. Yazdığım aşamalarda herhangi bir problem oluşursa hata kodu ile geri döndürme yapabiliyor.

API Kullanımı

Maksimum 1 MB yükleme yapabilirsiniz. JPG, GIF, PNG harici formatlar desteklenmez. Telif hakkı içeren ve yetişkin içerikte resim yüklemek yasaktır. Kural ihlali yapan siteler yasaklı listesine alınır.

ZIP dosyasını açtıktan sonra dosyaları istediğiniz(subdomain, dizin vb.) yere yüklediğiniz taktirde sistem sorunsuz çalışacaktır. Yalnız kendine göre özelleştirerek kullanmak isteyenler için dosyalar hakkında bilgi veriyorum.

Klasör İçeriği

api

api.html

islem.php

tmp

.htaccess

- api.html

Özel tasarımla uğraşmak istemeyenler için hazırlanmış, W3 uyumlu sayfadır.

CSS

<style type="text/css">
body{background:url('http://api.resim.im/img/bg.png') repeat-x; margin:100px 0 0 0; text-align:center; font-size:14px}
#kapsa{margin:0 auto; width:390px}
p{font-size:12px}
.pa { font-size:12px; text-align:left; }
#sonuc_p { margin:5px 0 0 0; text-align:left; }
#hata { background:url('http://api.resim.im/img/hata.gif') no-repeat; padding:0 0 3px 16px; margin:15px 0 0 0; font-size:11px;}
a{color:#000; text-decoration:none}
a:hover{color:#000; text-decoration:underline}
.linkler { width:342px; display:block; padding:5px; color:#333; margin:0 0 5px 0; }
.yeni_alan{width:389px; margin-top:20px}
.yeni_yukseklik{background-image:url('http://api.resim.im/img/01.png'); height:17px}
.yeni_alt{background-image:url('http://api.resim.im/img/03.png'); height:14px}
.yeni_ortala{background-image:url('http://api.resim.im/img/02.png')}
.yeni_alan .yeni_ortala ._html div a{color:#069; text-decoration:none}
._html{padding:20px 16px 16px 16px; clear:both; font-family:Verdana; font-size:12px; text-align:center;}
.yukle{margin:20px 0 0 0}
h1{text-align:right; font-size:13px; font-family:helvetica,sans-serif; padding:0; color:#999; font-weight:normal; margin:0 5px 0 0}
ul{margin:5px 5px  5px 15px; padding:0; list-style:none}
ul li{background:url('http://api.resim.im/img/kurallar.gif') no-repeat 0 2px; text-align:left; font-size:11px; line-height:20px; padding-left:25px}
#alt{font-size:11px; font-family:Tahoma; margin:10px 0 0 0}
</style>

CSS dosyası ile sayfa üzerinde tam olarak hakimiyet sağlayabilir ve form genişliği, buton ayarları ve arkaplan üzerinde sorunsuz değişiklik yapabilirsiniz. CSS öğrenmek için ilgili sayfayı ziyaret edip Türkçe E-book’u indirebilirsiniz.

Javascript

<script type="text/javascript">
// <![CDATA[
var buton   = "http://api.resim.im/img/buton.png";
// ]]>
</script>
<script type="text/javascript" src="http://api.resim.im/yukle.js"></script>

Javascript ile tek yolladığımız parametre buton bilgisidir. “http://api.resim.im/img/buton.png” imajını istediğiniz gibi değiştirebilirsiniz. Ek özellikler istediğiniz taktirde eklenebilir.

- islem.php

Kodlar sonraki versiyonlar için modüler altyapı oluşturmak niyetiyle tamamen php5(object oriented) olarak yazılmıştır.

190-191 satırları arasında düzenleme yapabilirsiniz.

define('_KLASOR_', 'tmp');
define('_KB_', '1000');

İlk satır : geçici klasör adıdır. Ön tanımlı değer “tmp” klasörüdür. Klasör adını değiştirmek istediğiniz taktirde CHMOD 777 vermeyi unutmayınız.
İkinci satır: yükleme yaptırabileceğiniz maksimum değerdir. 1000 Kilobayt aşağısında yükleme yaptırabilir ama yukarısı için hata alırsınız.

+ tmp

Geçici klasör adı, yukarıdaki yönergelere göre değişiklik yapabilirsiniz.

- .htaccess

Güvenlik içindir. Resimlerin yüklendiği klasör olduğundan dolayı içinde php, cgi, pl uzantılı çalıştırdığınızda hata alacaksınız.