Ajax Dosya Yükleme

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

<!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

<?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.

This entry was posted on Cumartesi, Ekim 3rd, 2009 at 17:20 and is filed under Ajax. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.