• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

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

Konuyu Okuyan Kişiler (0)

enc0der

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
11
Beğeniler
0
#1
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ı.
 

alp

webmaster.tc
Katılım
10 Ağu 2012
Mesajlar
80
Beğeniler
0
#5
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 ?
 

ByTRiSLaSiS

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
133
Beğeniler
0
Konum
İstanbul
#8
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 :)
 

ByTRiSLaSiS

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
133
Beğeniler
0
Konum
İstanbul
#9
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);
});