PHP – jQuery ile Ajax File Upload

jQuery - AJAX

PHP ile dosya yükleme işlemi yaparken kullanıcılara Upload durumunun hangi aşamada olduğunu yüzdesel olarak veya bir progres bar ile göstermek elbette daha güzel olur.

jQuery  Form plugini ile bu işi basitçe yapabiliyoruz. Bu yazımızda php ile bir upload sayfası hazırlayıp jQuery Form ile progres bar da durumunu gösterelim.

Kısaca jQuery Form plugini nedir? ne değildir bir bakalım.

jQuery Form Plugini kullanımı

//formid olarak kullandığımız formun id sini yazıyoruz 
$('#formid').ajaxForm(function() { 
         alert("Form gönderildi."); 
});

ajaxForm a parametre göndererek işlemimizin durumuna göre ne istersek yapabiliyoruz.

beforeSend fonksiyonu upload işlemi başlamadan önce yapmak istediğimiz işlemler için

uploadProgress fonksiyonu upload işlemimiz devam ederken çalışıyor

success form başarılı bir şekilde upload edildiyse çalışıyor.

complate fonksiyonu ise işlem bittiğinde tetikleniyor.

Upload Formu

şimdi dosya yükleme için kullanacağımız basit bir form tasarlayalım.

<form id="dosyayukle" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="dosya">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="yuzde">0%</div >
</div>
<br/>

<div id="mesaj"></div>

beforeSend kısmında bar genişliğini %0 olarak ayarlayoruz ve yuzde divine %0 yazdırıyoruz.

uploadProgress te percentComplate ile işlemin yüzdesini alıyoruz ve bar id li div e genişlik olarak veriyoruz.

success olunca hepsini %100 yapıyoruz.

complate fonksiyonunda ise mesaj kısmına başarılı yazdırıyoruz.

eğer bir hata olduysa da error fonksiyonunda hata olarak belirtelim.

jQuery Ajax File Upload
$(document).ready(function()
{

     $("#dosyayukle").ajaxForm({
	    beforeSend: function() 
	    {
	        $("#progress").show();
	        //clear everything
	        $("#bar").width('0%');
	        $("#mesaj").html("");
	        $("#yuzde").html("0%");
	    },
	    uploadProgress: function(event, position, total, percentComplete) 
	    {
	        $("#bar").width(percentComplete+'%');
	        $("#yuzde").html(percentComplete+'%');

	    },
	    success: function() 
	    {
	        $("#bar").width('100%');
	        $("#yuzde").html('100%');

	    },
	    complete: function(response) 
	    {
	        $("#mesaj").html("<font color='green'>Dosya başarılı bir şekilde yüklendi</font>");
	    },
	    error: function()
	    {
	        $("#mesaj").html("<font color='red'> Bir hata oluştu</font>");

	    }
	});

});

html dosyamız aşağıdaki gibi

<!doctype html>
<head>
	<meta charset="utf-8"> 
	<title>PHP Upload jQuery Progress</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
	<script src="http://malsup.github.com/jquery.form.js"></script>
	<style>
		form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
		#progress { display: none; position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
		#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
		#yuzde { position:absolute; display:inline-block; top:3px; left:48%; }
	</style>

</head>
<body>

<form id="dosyayukle" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="dosya">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="yuzde">0%</div >
</div>
<br/>

<div id="mesaj"></div>
         <script>
		$(document).ready(function()
		{

		     $("#dosyayukle").ajaxForm({
			    beforeSend: function() 
			    {
			        $("#progress").show();
			        //herşeyi temizliyoruz.
			        $("#bar").width('0%');
			        $("#mesaj").html("");
			        $("#yuzde").html("0%");
			    },
			    uploadProgress: function(olay, yuklenen, toplam, yuzde) 
			    {
			        $("#bar").width(yuzde+'%');
			        $("#yuzde").html(yuzde+'%');

			    },
			    success: function() 
			    {
			        $("#bar").width('100%');
			        $("#yuzde").html('100%');

			    },
			    complete: function(response) 
			    {
			        $("#mesaj").html("<font color='green'>Dosya başarılı bir şekilde yüklendi</font>");
			    },
			    error: function()
			    {
			        $("#mesaj").html("<font color='red'> Bir hata oluştu</font>");

			    }
			});

		});

	</script>
</body>
</html>

basit bir php upload dosyası oluşturalım. upload.php dosyamız da aşağıdaki gibi

<?php

$output_dir = "upload/";

if(isset($_FILES["dosya"]))
{
    if ($_FILES["dosya"]["error"] > 0)
    {
      echo "Hata: " . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
        move_uploaded_file($_FILES["dosya"]["tmp_name"],$output_dir. $_FILES["dosya"]["name"]);

     echo "Yüklenen dosya :".$_FILES["dosya"]["name"];
    }

}
?>
v
Ajax upload

PHP – jQuery ile Ajax File Upload” için 10 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir