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

来源：互联网发布：照相馆美工的工作内容编辑：程序博客网时间：2024/05/21 11:14

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

0 0