Merhaba arkadaşlar. Çok bahsedilen çok konulan bir konu jquery image upload. Kimine göre çok karmaşık kimine göre çok basit, kimine göre tam bir ezit olan bu konuyu elimden geldiğince basite indirerek anlatmaya çalışacağım.
Kullanacağımız Taglar;
Yukarıda direk upload fonksiyonumu ve yardımcı classı ekledim. Sizin hiç bir şey yapmanıza gerek yok artık. AjaxForm sizin yerinize herşeyi yapıyor.
Fonksiyonu anlatalım hemen kısaca.
$("#return").show(); // burada id si return olan tagimi goster diyorum nedenini en son anlatacagim.
$("#return").html(''); // burada id si return olan tagimin html degerini boşaltıyorum
$("#return").html('[img=|Uploading....]images/ajax-loader.gif[/img] İşlem Yapılıyor Bekleyiniz'); // id si return olan tagımın içerisine deger yazdırıyorum buda aynı anda ekranda gorunmesini sağlıyor bir nevi preload ama çokta alakalı degil.
$("#imageform").ajaxForm({
target: '#return',
success: function() {
$("#return").fadeOut(10000);
}
}).submit();
ve upload işlemimizin yapıldığı satır. target:'#return', bize işlem yapıldıktan sonra ekrana yazılacak degeri yazmamizi sagliyor $("#return").fadeOut(10000); fadeout ise id si return olan verimizin gizlenmesini sagliyor. üstte söylemiştim. Show() kismini bu yüzden yaziyoruz. Eğer yazmazsak 2. Yüklememizde Ekrana Değer basılmadığını göreceğiz. Jquery kısmımız bu kadar gelelim PHP kısmına.
Php kısmında ise standart upload işlemlerini yaptiriyoruz. Database e baglaniyoruz, Dosya adını replace ettiriyoruz, Yüklenecek resim türlerini belirliyoruz, Boyutu kontrol ediyoruz, Upload yapıyoruz ve sonucu yaziyoruz.
Database Tablo Yapısı :
Ve artik sizinde bir jquery image upload script'iniz oldu. Bu işlemi daha çok geliştirerek çoklu resim upload işlemine kadar getirebilirsiniz.
Scriptin Çalışır Halini phpogreniyorum.com dan temin edebilirsiniz.
Bol Php'li Günler
Hasan RUŞANOĞLU
Kullanacağımız Taglar;
PHP:
<script src="http://php.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
function ImageUpload() {
$("#return").show();
$("#return").html('');
$("#return").html('<img src="images/ajax-loader.gif" alt="Uploading...."/> İşlem Yapılıyor Bekleyiniz');
$("#imageform").ajaxForm({
target: '#return',
success: function() {
$("#return").fadeOut(10000);
}
}).submit();
}
</script>Fonksiyonu anlatalım hemen kısaca.
$("#return").show(); // burada id si return olan tagimi goster diyorum nedenini en son anlatacagim.
$("#return").html(''); // burada id si return olan tagimin html degerini boşaltıyorum
$("#return").html('[img=|Uploading....]images/ajax-loader.gif[/img] İşlem Yapılıyor Bekleyiniz'); // id si return olan tagımın içerisine deger yazdırıyorum buda aynı anda ekranda gorunmesini sağlıyor bir nevi preload ama çokta alakalı degil.
$("#imageform").ajaxForm({
target: '#return',
success: function() {
$("#return").fadeOut(10000);
}
}).submit();
ve upload işlemimizin yapıldığı satır. target:'#return', bize işlem yapıldıktan sonra ekrana yazılacak degeri yazmamizi sagliyor $("#return").fadeOut(10000); fadeout ise id si return olan verimizin gizlenmesini sagliyor. üstte söylemiştim. Show() kismini bu yüzden yaziyoruz. Eğer yazmazsak 2. Yüklememizde Ekrana Değer basılmadığını göreceğiz. Jquery kısmımız bu kadar gelelim PHP kısmına.
PHP:
$host = "localhost";
$dbname = "jqueryresim";
$dbuser = "root";
$dbpass = "pass";
$baglan = mysql_connect($host, $dbuser, $dbpass) or die("Sunucu İle İletişim Kurulamadı");
mysql_select_db($dbname,$baglan) or die("Database İle Bağlantı Sağlanamadı");
session_start();
function replace_tr($text) {
$text = trim($text);
$search = array('Ç','ç','Ğ','ğ','ı','İ','Ö','ö','Ş','ş','Ü','ü',' ', "'", '"', '^', '&', '.', ',', '+', ':', '-', '?', '!');
$replace = array('C','c','G','g','i','I','O','o','S','s','U','u','_', '', '', '', '', '_', '_', '_', '_', '_', '_', '_');
$new_text = str_replace($search,$replace,$text);
return $new_text;
}
$text['image_maxkb'] = 300*1000; // yuklenilecek MAX Dosya Boyutu. Ben 300 KB olarak veriyorum
$_SESSION[UserID] = "1"; //sessionimiza deger atiyoruz.
if(isset($_POST) && $_POST['action'] == "imageup"){
error_reporting(0);
$UploadUserPath = "UserImage/"; //Resmin Yükleneceği Dosya
$FileType = array ("image/jpeg","image/pjpeg","image/png","image/gif"); //Yüklenebilecek Resim Türleri
$name = $_FILES['resim']['name'];
$size = $_FILES['resim']['size'];
$tmp = $_FILES['resim']['tmp_name'];
$type = $_FILES['resim']['type'];
if(in_array($type, $FileType)){
if($size < $text['image_maxkb']){
$parcala=explode(".", $name); // resmi parcaliyoruz adını daha rahat olusturmak icin
$NewName = time().replace_tr($parcala[0]).".".$parcala[1]; //resime yeni bir isim veriyoruz türkçe karakterler ve özel karakterleri kaldiriyoruz
if(move_uploaded_file($tmp, $UploadUserPath.$NewName)){
@mysql_query("INSERT INTO tbluser_image (user_id, image) VALUES ('".$_SESSION[UserID]."', '".$UploadUserPath.$NewName."')");
if(@mysql_insert_id() != ""){
$islemsonuc = "<p class="msg done"><img src="".$UploadUserPath.$NewName."" width="150"></p>";
}else{
unlink($UploadUserPath.$NewName);
$islemsonuc = "<p class="msg error">Resim Kayıt İşleminde Bir Hata Oluştu</p>";
}
}else{
$islemsonuc = "<p class="msg error">Resim Yüklenirken Bir Hata Oluştu.</p>";
}
}else{
$islemsonuc = "<p class="msg error">Dosya Çok Büyük. En Fazla ".($text['image_maxkb']/1000)." KB Olabilir</p>";
}
}else{
$islemsonuc = "<p class="msg error">Desteklenmeyen Format. JPG, GIF ve PNG Dosyalarını Yükleyebilirsiniz.</p>";
}
echo $islemsonuc;
}Database Tablo Yapısı :
PHP:
CREATE TABLE `tbluser_image` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_id` INT NOT NULL ,
`image` TEXT NOT NULL
) ENGINE = MYISAM ;Scriptin Çalışır Halini phpogreniyorum.com dan temin edebilirsiniz.
Bol Php'li Günler
Hasan RUŞANOĞLU
