Hi there I'm having a problem uploading my file with a progressbar.
the problems are
- i cannot upload any photos at all
- i cannot find/promt errors
here is my full codes:
this is for php
<?php
if(!empty($_FILES['file'])){
foreach ($_FILES['file']['name'] as $key => $value) {
$file = $_FILES['file']['name'];
$allowed = array('.jpg','.png','.gif');
$ext = substr($file, strpos($file, '.'), strlen($file)-1);
if(!in_array($ext, $allowed)){
echo 'File type not allowed';
}else{
if($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], "images/{$value}")){
$uploaded[] = $value;
}
}
}
}
if(!empty($_POST['ajax'])){
die(json_encode($uploaded));
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="upload.js"></script>
<style>
#upload_progress{
display: none;
}
</style>
<title>File upload</title>
</head>
<body>
<div id="uploaded">
<?php
if(!empty($uploaded)){
foreach ($uploaded as $value){
echo "<div><a href='images/".$value."'>".$value."</a></div>";
}
}
?>
</div>
<div id="upload_progress"></div>
<div id="contain_progress" style="display:none; border:1px solid; width:300px; height:30px;">
<div id="progress_bar" style="border:1px solid; width:0px; height:25px; padding-top:3px; background-color:blue;"></div>
</div>
<div>
<form method="POST" enctype="multipart/form-data">
<div>
<input type="file" id="file" name="file[]" multiple="multiple">
<input type="submit" id="submit" value="upload">
</div>
</form>
</div>
</body>
</html>
this is for js
var handleUpload = function(event){
event.preventDefault();
event.stopPropagation();
var complete = 0;
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");
var prg_bar = document.getElementById("progress_bar");
var cnt_prg_bar = document.getElementById("contain_progress");
while(prg_bar.hasChildNodes()){
prg_bar.removeChild(prg_bar.firstChild);
}
while(progress.hasChildNodes()){
progress.removeChild(progress.firstChild);
}
progress.appendChild(document.createTextNode(Math.round(percent * 100)+'%'));
prg_bar.appendChild(document.getElementById('progress_bar').style.width = (Math.round(percent * 100) + "%"));
}
});
// upload function is here
request.upload.addEventListener('load',function(){
document.getElementById('upload_progress').style.display = 'block';
document.getElementById('progress_bar').style.display = 'none';
document.getElementById('contain_progress').style.display = 'none';
// var c = confirm("Upload sucessful click here to continue");
// if(c){
// window.location = "wala.php";
// }else{
// alert("no");
// }
});
request.upload.addEventListener('error',function(){
alert("upload failed");
});
request.addEventListener('readystatechange', function(){
if(this.readyState === 4){
if(this.Status === 200){
var links = document.getElementById('uploaded');
console.log(this.response);
var uploaded = eval(this.response);
var div, a;
for(var i = 0; i < uploaded.length; ++i){
div = document.createElement('div');
a = document.createElement('a');
a.setAttribute('href', 'files', + uploaded[i]);
a.appendChild(document.createTextNode(uploaded[i]));
div.appendChild(a);
}
}
else{
console.log('Server Replied with HTTP' + this.Status);
}
}
});
request.open("POST", "index.php");
request.setRequestHeader("Cache-Control","no-cache");
document.getElementById('upload_progress').style.display = 'block';
document.getElementById('progress_bar').style.display = 'block';
document.getElementById('contain_progress').style.display = 'block';
request.send(data);
//end of handleUpload
};
window.addEventListener('load', function(){
var submit = document.getElementById("submit");
submit.addEventListener("click", handleUpload);
});
Any help on this is highly appreciated