Menu
I understand the HTML/PHP side of a multi-file upload, but I suppose what I'm after is a Javascript solution that separates the files array pre-post and individually sends the files to a separate PHP program to receive upload and success/fail feedback before continuing. (ie: files[0] -> POST -> Success -> files[1] -> POST -> Success ->etc...)
Here is what I use now for a single file -
function upload(file){
var data = new FormData();
data.append("file", document.getElementById(file).files[0]);
var xmlHTTP = new XMLHttpRequest();
xmlHTTP.open("POST", "uploader.php");
xmlHTTP.send(data);
}
I realize that the easy way out would be to create multiple file fields, however what I'm trying to do is use <input type="file" multiple> from HTML5 to mass-select a list of files at a time. If I could only separate the files with Javascript, then it would be a simple matter of looping through the above script with an onreadystatechange reporting the success/fail each time.
Any ideas?
EDIT:
Forgive my tunnel vision, that was extremely simple! Here's my full code in case it helps someone else out.
<html>
<head>
<script language="Javascript">
function multiupload(file){
count = 0;
maxcount = document.getElementById(file).files.length;
alert(maxcount);
upload(file,count);
}
function upload(file,count){
var data = new FormData();
data.append("file", document.getElementById(file).files[count]);
var xmlHTTP = new XMLHttpRequest();
xmlHTTP.open("POST", "uploader.php");
xmlHTTP.onreadystatechange=function(){
if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200){
count = count+1;
if(count<maxcount){
upload(file,count);
}
}
}
xmlHTTP.send(data);
}
</script>
</head>
<body>
<div id="result"></div>
<form method="post" action="">
<input type="file" name="file" id="file" multiple>
<input type="button" name="submit" value="Upload" onclick="multiupload('file');void(0);">
</form>
</body>
</html>
848
Try this. You can start uploading the next file in the success handler. That way you can do files[0] -> POST -> Success -> files1 -> POST -> Success
134
To see how many files there are, use document.getElementById(file).files.length. Once you've looped that many times, you have uploaded all the files! Here's my sample:
<html>
<head>
<script language="Javascript">
function multiupload(file){
count = 0;
alert(document.getElementById(file).files.length);
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="file" id="file" multiple>
<input type="button" name="submit" value="Upload" onclick="multiupload('file');void(0);">
</form>
</body>
</html>
(Source: https://developer.mozilla.org/en-US/docs/DOM/FileList)
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
