您的位置：首页 > Web前端 > HTML

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

2016-07-15 19:05 405 查看

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

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航