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 12 yorum

  • Geri bildirim: Soru: Ajax ile post sorunu

  • 20 Şubat 2014 tarihinde, saat 13:13
    Permalink

    upload.php de dosyanın adını ve yolunu veri tabanına yazabilirsiniz.

    Yanıtla
  • 25 Mart 2014 tarihinde, saat 01:49
    Permalink

    Bu yazınız bir sürü kişiye yardımcı olduğuna eminim. Çok teşekkürler, yem imlerine kaydettim 🙂

    Yanıtla
  • 17 Temmuz 2014 tarihinde, saat 22:42
    Permalink

    Kardeşim gerçekten teşekkürler basit ve bir o kadarda kullanışlı teşekkürler 🙂

    Yanıtla
  • 24 Ocak 2015 tarihinde, saat 05:01
    Permalink

    vallaha isime yaradı html5 webkit ile daha da hoş oldu 🙂

    Yanıtla
  • 06 Ağustos 2015 tarihinde, saat 01:51
    Permalink

    Çalışan bir kod Çok teşekkürler.Böyle adamlar lazım ülkemize.

    Yanıtla
  • 07 Ağustos 2015 tarihinde, saat 16:13
    Permalink

    Merhaba, yazınızı okudum, uyguladım, gerçekten çok iyi bir anlatım olmuş, başarılarınızı devamını dilerim.

    Yanıtla
  • 05 Ekim 2017 tarihinde, saat 00:20
    Permalink

    Ben wordpress içerisinde kullanmak istedim. Birebir denileni yaptım. kayıtlı olduğu dosyanın yanına uploads diye bir klasör açtım. fakat bir türlü dosyaları kaydetmiyor. Dosya izinlerini de kontrol ettim. Başka bir yöntem ile upload yapabiliyorum. fakat bununla yüklendi demesine rağmen dosya yüklenmiyor. Nelere dikkat etmem gerekir?

    Yanıtla

Bir Cevap Yazın

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