Php Durum Çubuğu ile Dosya Yükleme (HTML5 Progressbar)

  Bu yazımızda html5’in nimetlerinden progressbarı kullanıp php ile bir dosya yükleme işlemi gerçekleştireceğiz.Bunun için tabiki bir miktarda javascript ve ajax kullanacağız.Yazıyı okumadan önce temel seviyede ajax bilmeniz yeterlidir ..

Yazıyı daha rahat okuyabilmek için sağ üstten tam ekrana tıklayabilirsiniz
Php upload için verot upload class arayüz için bootstrap Kullandım

Demo Uygulama  (Demoda gerçek dosya yüklemez / link vermez )

HTML Kısmı

Html kısmında bir dosya seçme, bir yükleme butonu ve bi kaç durum texti yeterli

<body>
<div class="container">
   <center>
<div class="well">
<h3>Dosya Yükleme <small>HTML5 Progress Bar</small></h3>

<hr>

<form id="upload_form" enctype="multipart/form-data" method="post">
	<input type="file" id="file1" name="file1">
<input type="button" class="yukleDosya btn " value="Dosyayı Yükle" onclick="uploadFile()">

Durum :  <progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>

</form></div>
</center></div>
</body>

 
Sayfanın sonunda Demo Sayfasını bulabilir ve Bilgisayarınıza indirebilirsiniz

Css Kısmı ve Kullanılan Kütüphaneler

Html ögelerimize css ile bir kaç düzenleme yapalım ayrıca bootstrap ve jquery kütüphanelerimizi çağıralım

		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<style type="text/css">

	.well {	width:45%;margin-top:50px; border-radius:0px; box-shadow:0px 2px 5px #a59;}
	.alert {  width:300px; border-radius:0px; font-weight:normal; font-size:14px; }
	.btn { border-radius:0px; width:300px; margin-left:0px; background-color:#2cbd44; color:white;}
	.btn:hover { color:white;}
	#file1 { margin-left:-35px;}

</style>

Javascript ve Ajax Kısmı

Javascriptte öncelikle gerekli 2 fonksiyonumuzu yazalım , birisi html elemanlarını rahat seçmek için , diğeri ise dosyanın seçilip seçilmediğini kontrol etmek için


      function _(el){
           return document.getElementById(el);
      }

      function hasFile(selector){
	       return $(selector).val()? true: false;
      }

Şimdide javascript ve ajax kodlarımızı yazalım

İşlem Yapılırken

  function progressHandler(event){

	_("loaded_n_total").innerHTML = "Yükleniyor "+event.loaded+" bytes of "+event.total;
	var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
	_("status").innerHTML = "
<div class='alert alert-info'><b>"+Math.round(percent)+"%</b> yükleniyor... Lütfen Bekleyin</div>
";
	$(".yukleDosya").val('Yükleniyor..');
	$(".yukleDosya").attr('disabled','true');

	}

İşlem bittiğinde , hatalı bir durumda , yüklenemediğinde

function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
	_("loaded_n_total").innerHTML = "Dosya başarıyla aktarıldı ";
	_("progressBar").value = 100;
	$(".yukleDosya").val('Yüklendi..');
	$(".yukleDosya").addClass('btn-info');

}
function errorHandler(event){
	_("status").innerHTML = "Yüklenemedi";
}
function abortHandler(event){
	_("status").innerHTML = "Dosya Yükleme Hatalı";
}

Upload Fonksiyonumuz

function uploadFile(){
	if(hasFile("#file1")==true) {

	    var file = _("file1").files[0];				
	    var formdata = new FormData();
		formdata.append("file1", file);
		var ajax = new XMLHttpRequest();
		ajax.upload.addEventListener("progress", progressHandler, false);
		ajax.addEventListener("load", completeHandler, false);
		ajax.addEventListener("error", errorHandler, false);
		ajax.addEventListener("abort", abortHandler, false);
		ajax.open("POST", "upload.php");
		ajax.send(formdata);

	}else{
		alert('Öncelikle Dosya Seçmelisiniz..');
	}
}

PHP Tarafı (upload.php)

Upload fonkisyonumuzda upload.php adlı dosyaya post ettiğimiz için upload.php adında dosya açalım
Verot upload classını kullanarak upload işlemimizi gerçekleştirelim

<?php
echo '<meta charset="utf8"/>';
include 'class.upload.php';

$handle = new upload($_FILES['file1']);
  if ($handle->uploaded) {
      $handle->process('upload');
      if ($handle->processed) {
          echo  '
<div class="alert alert-success"><b>'.$handle->file_src_name.'</b> Adlı Dosya Yüklendi</div>
<span style="font-size:14px;"> Dosya Adresi :  <a href="'.$handle->file_dst_pathname.$handle->file_dst_name'">İndir</a></span>';
          $handle->clean();
      } else {
          echo 'error : ' . $handle->error;
      }
  }
?>

Demo UygulamaBilgisayara İndir

Php Durum Çubuğu ile Dosya Yükleme (HTML5 Progressbar)” hakkında 5 yorum

  1. Selam;

    yazmış olduğunuz bu başarılı upload işlemi için öncelikle çok Teşekkür ederim.

    Gayet başarılı şekilde upload işlemi gerçekleşiyor ama ne yaptıysam upload.php içerinden dosya yolunu veritabanına yazdıramadım. Birde upload klasörünü başka bir bölüme oluşturmak için ne yapmalıyım?

    Bu konu hakkında biraz açıklama yaparsanız minnettar olurum.

    Saygılar

    1. Selam ,
      Bu konuda class.upload.php classını kullanmıştım $file->file_dst_path . $file->file_dst_name; ile yüklediğiniz dosyanın adresine ulaşabilirsiniz

  2. hocam class.upload.php te şu hatayı alıyorum. o satırada baktım fakat anlamadım neden olduğunu
    Warning: preg_match(): Compilation failed: invalid range in character class at offset 7 in /home/u869254194/public_html/class.upload.php on line 2899

Bir Cevap Yazın

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