input标签file类型,选择多个文件进行上传
2016-05-19 14:14
399 查看
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>xhr2</title>
</head>
<body>
<div style="text-align:center;margin:100px">
<input type="file" id="file" name="file" multiple="multiple">
<button onclick="xhr2()">多文件上传</button>
</div>
<script>
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', 'xhr2.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('请求超时!');
}
}
</script>
</body>
</html>
php处理页面
<?php
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));
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>xhr2</title>
</head>
<body>
<div style="text-align:center;margin:100px">
<input type="file" id="file" name="file" multiple="multiple">
<button onclick="xhr2()">多文件上传</button>
</div>
<script>
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', 'xhr2.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('请求超时!');
}
}
</script>
</body>
</html>
php处理页面
<?php
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));
}
?>
相关文章推荐
- PCA的数学原理(非常值得阅读)!!!!
- xmpp与websocket构建实时通行比较
- 解析JSON文件
- Android 使用android-support-multidex解决Dex超出方法数65536的限制问题
- MySQL5.7 利用keepalived来实现mysql双主高可用方案的详细过程
- java netty简单使用
- Android仿天天动听歌曲自动滚动view
- 详述面相对象编程思想
- eclipse SSE设置
- <从PAXOS到ZOOKEEPER分布式一致性原理与实践>读书笔记-第5章zookeeper安装
- textfield相关
- Kindeditor-4.1.10使用
- 常见的预测算法
- Spring DispatcherServlet 的作用
- 黄永成-thinkphp讲解-个人博客讲解26集
- JDK和tomcat如何配置环境变量
- 将windows版本的svn安装整理成文档
- Linux操作系统基础解析之(一)——IT技术简介
- Codeforces 675C Money Transfers 【思维】 + 675D Tree Construction 【二分】
- linux命令格式