处理多个上传文件

Question

我：我曾经在网上发布的第一个问题“带走我的童贞”
你：知识渊博，熟练操作你的工作。

经过数小时的研究，我需要一些主要的帮助。

脚本/代码旨在将文件发送到服务器端php脚本processup.php，它将文件存储到特定文件夹。只要我一次上传一个文件，所有工作都很好。如果我尝试上传多个文件，它只会上传一个文件。所以我增加了额外的formdata.append认为这将解决我的问题，但它所做的只是上传两次相同的文件。我已经看到了你可以创建多个html表单的例子，但我宁愿坚持使用一种表单。希望我已经解释了我的问题以及我的最终目标是什么。

在此先感谢。

这里是我的HTML代码

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

下面是javascript代码

<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

从多个文件输入上传多个文件添加一个包含字段的形式最简单的方法是形式数据的构造函数

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

你可以这样做它的方式，你的错误是你添加了相同的文件两次

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