Web projelerimizde yer alan ürünlere veya galerilere resimleri yüklemek için klasil dosya yükleme, dosyalar yüklenirken bir seferde sınırlandırma getirerek yükleme yapmamızı sağlıyor. Bir foto galeriye normal form file sistemi ile 1,3,5, gibi sınırlı yülemeler yapabiliyoruz. Bu örneğimize sayfamızı yenilemeden ajax ile fotograf dosyalarını yükleme işlemini uygulayacağız. Bu uygulamadaki asıl amaç çoklu dosya yükleme işlemleri yapmayı öğrenmek.
index.html kodalarımız
- Kod: Tümünü seç
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>AJAX File Upload - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('JPG, PNG veya GIF özelliğindeki dosyaları yükleyiniz');
return false;
}
status.text('Yükleniyor...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
</script>
</head>
<body>
<div id="mainbody" align="center" >
<h3>» AJAX User Dosya Yükleme</h3>
<!-- Upload Button, use any id you wish-->
<div id="upload" ><span>Upload File<span></div><span id="status" ></span>
<ul id="files" ></ul>
</div>
</body>
upload-file.php kodlarımız
- Kod: Tümünü seç
<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "Hatasız yüklendi";
} else {
echo "Hata";
}
?>
upload-file.php sayfamızdaki “echo “Hatasız yüklendi”;” bölümü fotograf yüklendiğinde manasına geldiğinden veritabanımızda fotograf adlarını tutmak istiyorsak bu bölümde veri tabanına fotografı kaydetmeliyiz. Örnegin bir haber sitemizvar ve haberin birden fazla fotografı var “Ajax Dosya Yükleme” örneğimiz haber ek fotografları için biçilmiş kaftandır.
Başa Dön
