一个文件域实现多文件的上传<一>

最新推荐文章于 2024-04-29 14:16:30 发布

v_wanglei

最新推荐文章于 2024-04-29 14:16:30 发布

阅读量2.4k

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/v_wanglei/article/details/51944917

版权

php 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一个文件域实现多文件的上传:

表单页面：

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