input标签file类型，选择多个文件进行上传

最新推荐文章于 2024-07-19 18:08:01 发布

zph同学

最新推荐文章于 2024-07-19 18:08:01 发布

阅读量1.8w

点赞数 6

分类专栏： php语言 js and php文件上传 javacsript语言

本文链接：https://blog.csdn.net/zph1234/article/details/51190295

版权

php语言同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javacsript语言

6 篇文章 0 订阅

订阅专栏

js and php文件上传

2 篇文章 0 订阅

订阅专栏

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"><progress id="uploadprogress" min="0" max="100" value="0">0</progress>
			<button οnclick="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.upload.onprogress = function (event) {
			　　if (event.lengthComputable) {
			　　　　var complete = (event.loaded / event.total * 100 | 0);
		　　　　　　     var progress = document.getElementById('uploadprogress');
			　　　　progress.value = progress.innerHTML = complete;
			　　}
			};
			//发送请求
			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));
}

?>

zph同学

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
input标签file类型，选择多个文件进行上传

html页面 xhr2 多文件上传 function xhr2(){ var xhr = new XMLHttpRequest();//第一步 //定义表单变量 var file = document.getElementById('file').files; //console.log(file.l
复制链接

扫一扫

专栏目录