• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Jquery - Php Resim Upload

Konuyu Okuyan Kişiler (0)

kralmermi

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
93
Beğeniler
0
Konum
<?php ?>
#1
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;

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>
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:
$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;
  }
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ı :

PHP:
CREATE TABLE `tbluser_image` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_id` INT NOT NULL ,
`image` TEXT NOT NULL
) ENGINE = MYISAM ;
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