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