js多文件上传

一、HTML

选择文件的时候可以选择多个文件，这个需要我们在input file 里面加入一个属性multiple="multiple" 这样就可以框选文件了

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>多文件上传</title>

</head>

<body>

<div style="text-align:center;margin:100px">

    <input type="file" id="file" name="file" multiple="multiple">

    <button onclick="xhr2()">多文件上传</button>

</div>

</body>

</html>

二、JS

下面使用到的知识参考自：

http://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.html

http://www.jb51.net/article/89998.htm

https://my.oschina.net/u/1866405/blog/335987

//多文件上传函数

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', '2.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('请求超时！');

    }

}

三、PHP

这里就是简单的接收文件和移动文件

if($_POST){

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

    }

}

相关文章