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
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
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ı.