处理多个上传文件

Question

Me: First question i ever posted online "take my virginity"
You: Knowledgeable and skilled at what you do.

After hours and hours of researching, i need some major help.

The script/code is designed to send files to a server side php script processup.php which stores the files to a specific folder. All works well as long as i upload one file at a time. If i try to upload multiple files it would only upload one. So i added an additional formdata.append thinking this would solved my problem but all it does is upload the same file twice. I have seen examples in where you can create multiple html forms, but i would rather stick with one form. Hope i have explained my problem and what my end goal is.

Thanks in advance.

Here is my HTML code

<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="files[]" multiple id="files[]"><br>
<button type="reset" value="Reset">Reset</button><br>
<input type="button" value="Upload Me" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;">
</progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>

Here is the javascript code

<script> 

function _(el){
 return document.getElementById(el);
} 
function uploadFile(){
var file = _("files[]").files[0];
//alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("files[0]", file);
formdata.append("files[1]", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "processup.php"); 
ajax.send(formdata);
} 
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of"   
+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
 _("status").innerHTML = Math.round(percent)+"% Uploading..";
 }
 function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
} 
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</script>

Answer 1

The easiest way to upload multiple files from a multiple file input is to add the form that contains the field to the formdata constructor

var formdata = new FormData(_("upload_form"));
var ajax = new XMLHttpRequest();
...

You can do it the way you have it also, your error is you're adding the same file twice

var file0 = _("files[]").files[0];
var file1 = _("files[]").files[1];
var formdata = new FormData();
formdata.append("files[0]", file0);
formdata.append("files[1]", file1);