Dosya upload Progress yapımı (Anlatım)

E

enc0der

webmaster.tc
Üye
Katılım
6 Ağu 2012
Mesajlar
11
Merhaba uzun zamandır arıyordum flash vs.. kullanmadan javascript ve php ile progress yapını phpacademy videoları izleyerek yaptım kodlarıda sizlerle paylaşıyorum.
inputun multiple özelligi sayesinde tek seferde birden fazla dosya secebilirsiniz. Her tarayıcı bunu desteklemeyebilir örnek ie7



upload.php

PHP: 
<?php
      //Nuh ÇOLAKKADIOĞLU  
  if(!empty($_FILES['file'])){
      foreach ($_FILES['file']['name'] as $key=>$name){
          $isim = rand(0,999999);
          $isim2 = rand(0,99999);
          $uzanti = substr($_FILES["file"]["name"][$key],-4,4);
          $dizin = "files/".$isim2.'-'.$isim.$uzanti;
          if($_FILES['file']['error'][$key]==0 && move_uploaded_file($_FILES['file']['tmp_name'][$key],$dizin)){
              
              $uploaded[] = $dizin;
          }
      }
      
      if(!empty($_POST['ajax'])){
           die(json_encode($uploaded));
      }else{
         
      }
  }  
        
  ?>
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Dosya Upload</title>
    <script type="text/javascript" src="upload.js"></script>
    <style type="text/css">
        #upload_progress{
            display: none;
        }
        
    </style>
</head>
<body>
    <div id="uploaded">
        <?php
        
        if(!empty($uploaded)){
           
            foreach ($uploaded as  $name){
                echo '<div><a href="'.$name.'">'.$name.'</a></div>';
            }
            
        }
        
        ?>
        
    </div>
    
    <div id="upload_progress">
        
    </div>
    
    <div>
        <form action="" method="POST" enctype="multipart/form-data">
            <input type="file" id="file" name="file[]" multiple="multiple" />
            <input type="submit" value="Upload" id="submit" />
        </form>
        
    </div>
    
</body>
</html>
upload.js

PHP: 
var handleUpload = function(event){
  event.preventDefault();
  event.stopPropagation();
  
  var fileInput = document.getElementById('file');
  var data = new FormData();
  data.append('ajax',true);
  for(var i=0; i<fileInput.files.length; i++){
      data.append('file[]',fileInput.files[i]);
  }
  
  var request = new  XMLHttpRequest();
  request.upload.addEventListener('progress', function(event){
      if(event.lengthComputable){
          var percent = event.loaded/event.total;
          var progress = document.getElementById('upload_progress');
          
          while(progress.hasChildNodes()){
              progress.removeChild(progress.firstChild);
          }
          progress.appendChild(document.createTextNode(Math.round(percent *100)+' %'));
          
      }
  });
  request.upload.addEventListener('load', function(event){
      document.getElementById('upload_progress').style.display='none';
  });
  request.upload.addEventListener('error', function(event){
      alert("Dosya Yüklenemedi...");
  });
  
  request.open('POST', 'upload.php');
  request.setRequestHeader('Cache-Control', 'no-cache');
    document.getElementById('upload_progress').style.display='block';
  request.send(data);
}

window.addEventListener('load', function(event){
    var submit =  document.getElementById('submit');
    submit.addEventListener('click', handleUpload);
});
files diye bir klasör oluşturun.

Not: Her türlü dosya türünü kabul eder şuanda filtreleme yapılmadı.
 

S

Scarface

webmaster.tc
Üye
Katılım
8 Ağu 2012
Mesajlar
123
Konum
Sincan
çok yararlı olacak benim için çok teşekkürler :)
 

A

alp

webmaster.tc
Üye
Katılım
10 Ağu 2012
Mesajlar
79
hocam ben bunun kullanmayı düşünüyorum ;

ama dosyaları files değilde başka bir klasöre atmasını istiyorum ; bunu nasıl ayarlayacağım kodlarda ?
 

B

ByTRiSLaSiS

webmaster.tc
Üye
Katılım
6 Ağu 2012
Mesajlar
129
Konum
İstanbul
nuh böle güzel işler çıkartırmıydın sen
ellerin dert görmesin kardeşim incelemedim eminim sağlıklı çalışıyordur :)
 

B

ByTRiSLaSiS

webmaster.tc
Üye
Katılım
6 Ağu 2012
Mesajlar
129
Konum
İstanbul
bugün bi arkadaş bu olayı biraz değişiklikle düzenleyip verebilirmisin dedi
baktım güzel script çalışıyor yazım düzeni bozukluğu var
ayrıca dosya uzantısı alım işlemi yanlış alpstorrent.com'da kullanılacak bu script ve torrent dosyası upload edilcek

torrent dosyasının uzantısı 6 karakter ama burada uzantıda 3 karakter istemişssin ;) sadece .rent olarak uzantıyı alıyordu editlendi düzenlendi

rastgele isim vermişssin ;) güzel mantık bende kendi isimlerinde bıraktım ve özel karakterleri _ ile değiştirdim buyrun lazım olur belki tekrar eline sağlık nuh..



Upload.php
PHP: 
<?php
      //Nuh ÇOLAKKADIOĞLU  
  if(!empty($_FILES['file'])){
      foreach ($_FILES['file']['name'] as $key=>$name){
          $isim = rand(0,999999);
          $isim2 = rand(0,99999);
          
         $x = pathinfo($_FILES["file"]["name"][$key]);
         $uzanti = ".".$x['extension'];
          
          $dizin = "files/".preg_replace('/\W/','_',$_FILES["file"]["name"][$key]).$uzanti;
          if($_FILES['file']['error'][$key]==0 && move_uploaded_file($_FILES['file']['tmp_name'][$key],$dizin)){
              
              $uploaded[] = $dizin;
          }
      }
      
      if(!empty($_POST['ajax'])){
           die(json_encode($uploaded));
      }else{
         
      }
  }  
        
  ?>
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Dosya Upload</title>
    <script type="text/javascript" src="upload.js"></script>
    <style type="text/css">
        #upload_progress{
            display: none;
        }
        
    </style>
</head>
<body>
    <div id="uploaded">
        <?php
        
        if(!empty($uploaded)){
           
            foreach ($uploaded as  $name){
                echo '<div><a href="'.$name.'">'.$name.'</a></div>';
            }
            
        }
        
        ?>
        
    </div>
    
    <div id="upload_progress">
        
    </div>
    
    <div>
        <form action="" method="POST" enctype="multipart/form-data">
            <input type="file" id="file" name="file[]" multiple="multiple" />
            <input type="submit" value="Upload" id="submit" />
        </form>
        
    </div>
    
</body>
</html>


upload.js
PHP: 
var handleUpload = function(event){
  event.preventDefault();
  event.stopPropagation();
  
  var fileInput = document.getElementById('file');
  var data = new FormData();
  data.append('ajax',true);
  for(var i=0; i<fileInput.files.length; i++){
      data.append('file[]',fileInput.files[i]);
  }
  
  var request = new  XMLHttpRequest();
  request.upload.addEventListener('progress', function(event){
      if(event.lengthComputable){
          var percent = event.loaded/event.total;
          var progress = document.getElementById('upload_progress');
          
          while(progress.hasChildNodes()){
              progress.removeChild(progress.firstChild);
          }
          progress.appendChild(document.createTextNode(Math.round(percent *100)+' %'));
          
      }
  });
  request.upload.addEventListener('load', function(event){
      document.getElementById('upload_progress').style.display='none';
  });
  request.upload.addEventListener('error', function(event){
      alert("Dosya Yüklenemedi...");
  });
  
  request.open('POST', 'upload.php');
  request.setRequestHeader('Cache-Control', 'no-cache');
    document.getElementById('upload_progress').style.display='block';
  request.send(data);
}

window.addEventListener('load', function(event){
    var submit =  document.getElementById('submit');
    submit.addEventListener('click', handleUpload);
});
 

Yanıt için giriş yapmanız veya üye olmanız gerekir.
Üst