一、HTML
选择文件的时候可以选择多个文件，这个需要我们在input file 里面加入一个属性multiple="multiple" 这样就可以框选文件了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>多文件上传</title> </head> <body> <div style="text-align:center;margin:100px"> <input type="file" id="file" name="file" multiple="multiple"> <button onclick="xhr2()">多文件上传</button> </div> </body> </html>
二、JS
下面使用到的知识参考自：
http://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.html
http://www.jb51.net/article/89998.htm
https://my.oschina.net/u/1866405/blog/335987
//多文件上传函数 function xhr2(){ var xhr = new XMLHttpRequest();//第一步 //定义表单变量 var file = document.getElementById('file').files; //console.log(file.length); //新建一个FormData对象 var formData = new FormData(); //++++++++++ //追加文件数据 for(i=0;i<file.length;i++){ formData.append("file["+i+"]", file[i]); //++++++++++ } //formData.append("file", file[0]); //++++++++++ //post方式 xhr.open('POST', '2.php'); //第二步骤 //发送请求 xhr.send(formData); //第三步骤 //ajax返回 xhr.onreadystatechange = function(){ //第四步 if ( xhr.readyState == 4 && xhr.status == 200 ) { console.log( xhr.responseText );//打印数据到控制台 } }; //设置超时时间 xhr.timeout = 100000; xhr.ontimeout = function(event){ alert('请求超时！'); } }
三、PHP
这里就是简单的接收文件和移动文件
if($_POST){ print_r($_FILES["file"]); for($i=0;$i<count($_FILES["file"]['name']);$i++){ $name=$_FILES["file"]["name"][$i]; move_uploaded_file($_FILES["file"]["tmp_name"][$i],iconv("UTF-8","gb2312",$name)); } }