一个文件域实现多文件的上传:
表单页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>多文件上传</title>
</head>
<body>
<input type="file" id="file" name="file" multiple="multiple">
<button οnclick="xhr2()">多文件上传</button>
<script>
function xhr2(){
var xhr = new XMLHttpRequest(); // 初始化ajax
var file = document.getElementById('file').files; // 定义表单变量
//console.log(file.length); // firbug中调试用
var formData = new FormData(); //新建一个FormData对象
<span style="white-space: pre;"> </span>//追加文件数据
for(i=0;i<file.length;i++){
formData.append("file["+i+"]", file[i]);
}
//formData.append("file", file[0]);
xhr.open('POST', 'files.php'); // 打开一个链接 采用post传值
xhr.send(formData); // 向服务器发送请求
xhr.onreadystatechange = function(){ //第四步
if ( xhr.readyState == 4 && xhr.status == 200 ) {
console.log( xhr.responseText );
}
};
// 设置超时时间
xhr.timeout = 100000;
xhr.ontimeout = function(event){
alert('请求超时!');
}
</script>
</body>
</html>
php页面:
<?php header('content-type:text/html;charset=utf-8');
/*循环输出图片的路径并实现添加*/
for($i=0;$i<count($_FILES['files']['name']);$i++){
$path = "/file/".$_FILES['files']['name'][$i]; // 文件路径
move_uploaded_file($_FILES['files']['tmp_name'][$i], $path);
}