Hi guys, thanks in advance for any help.
I'm using this tutorial Click Here To make a multi-file upload. the actual upload works just fine, however the % progress and final file list of uploaded files that is supposed to show at the end is not working.
Here is the upload page itself
<?php
if (!empty($_FILES['file'])){
foreach($_FILES['file']['name'] as $key => $name){
if ($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], "files/{$name}")){
$uploaded[] = $name;
}
}
if (!empty($_POST['ajax'])){
die(json_encode($uploaded));
}
}
?>
<html>
<head>
<title>Multi-file Upload</title>
<script type="text/javascript" src="upload.js"></script>
<style>
#upload_progress {display: none;}
</style>
</head>
<body>
<div id="uploaded">
<?php
if (!empty($uplaoded)){
foreach ($uploaded as $name){
echo '<div><a href="files/', $name, '">', $name, '</a></div>';
}
}
?>
</div>
<div id="upload_progress"></div>
<div>
<form action="" 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>
And here is the javascript it calls for...
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('Upload Failed');
});
request.addEventListener('readyStateChange', function(event){
if (this.readyState == 4){
if (this.status == 200)(
var links = document.getElementByID('uploaded');
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);
links.append.Child(div);
}
} else {
)
}
});
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);
});
Can anyone help me figure out why it's not loading the progress text and final links. Thanks
P.S. I use Google Chrome and firefox (as a note for which browser i use to test this)