Ajax Dosya Yükleme

Cevapla
Kullanıcı avatarı
Misafir

Ajax Dosya Yükleme

Mesaj gönderen Misafir » 17 May 2011 , Sal 1:22 pm

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>&raquo; 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.

Cevapla

“Yazılım” sayfasına dön

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir