input标签file类型上传多个文件

最新推荐文章于 2023-09-22 16:47:53 发布

一叶之秋Tel

最新推荐文章于 2023-09-22 16:47:53 发布

阅读量3.7k

点赞数 5

分类专栏： PHP

本文链接：https://blog.csdn.net/guoqian1408/article/details/52506096

版权

PHP 专栏收录该内容

16 篇文章 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));  
}  
  
?>