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