Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/231.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 处理多个上载文件_Javascript_Php_Html_Ajax_Upload - Fatal编程技术网

Javascript 处理多个上载文件

Javascript 处理多个上载文件,javascript,php,html,ajax,upload,Javascript,Php,Html,Ajax,Upload,我:我在网上发布的第一个问题,关于我的贞操 你:对你所做的事很有知识和技能 经过数小时的研究,我需要一些主要的帮助 该脚本/代码旨在将文件发送到服务器端php脚本processup.php,后者将文件存储到特定文件夹中。只要我一次上传一个文件,一切都很好。如果我尝试上传多个文件,它只会上传一个。因此,我添加了一个额外的formdata.append,认为这可以解决我的问题,但它所做的只是将同一个文件上载两次。我看到过一些例子,其中可以创建多个html表单,但我宁愿只使用一个表单。希望我已经解释了

我:我在网上发布的第一个问题,关于我的贞操 你:对你所做的事很有知识和技能

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

该脚本/代码旨在将文件发送到服务器端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>

从多文件输入上载多个文件的最简单方法是将包含该字段的表单添加到formdata构造函数

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

穆萨的贞操。我从没想过我能得到如此快速准确的答案。