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

标签: html 标签 图片
3156人阅读 评论(0) 收藏 举报
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));  
    }  
      
    ?>  


查看评论

解决<input type=“file” multiple> 多文件上传问题(可以多次选取文件,也可以一次选取多个文件),而且点击的是一个同一个div

思路大致是点击第一个div就创建一个input并绑定change事件,然后将这个input对象加入到第二个div中同时触发input对象的click事件来选取需要的文件。 注意:第二个div是不可见...
  • shownyu
  • shownyu
  • 2017-05-25 12:59:38
  • 10458

Spring文件上传,包括一次选中多个文件

Spring文件上传代码示例, 包括一次选中多个文件, 前端与后端代码处理
  • wanghailong_qd
  • wanghailong_qd
  • 2017-05-27 09:14:45
  • 3189

一次选择多个文件进行批量上传

  • 2015年01月06日 13:29
  • 116KB
  • 下载

一个文件域实现多文件的上传<一>

一个文件域实现多文件的上传: 表单页面: 多文件上传 ...
  • v_wanglei
  • v_wanglei
  • 2016-07-18 19:53:58
  • 1435

WEB版一次选择多个文件进行批量上传(Plupload)的解决方案

说明:Plupload支持多种浏览器,多种上传方式!       一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的...
  • z69183787
  • z69183787
  • 2015-06-30 18:02:47
  • 3915

选中多文件同时上传(利用input元素的multiple属性)

网页: Insert title here 一个选择上传的文件
  • wangxy799
  • wangxy799
  • 2016-05-09 10:45:48
  • 12975

如何设置input实现同时选中多个文件并同时上传

多个文件同时上传
  • baidu_37107022
  • baidu_37107022
  • 2017-06-12 19:57:39
  • 7488

input file文件上传

一:浏览器post表单提交 通常的input组件表单提交时,按照form属性提交的其中enctype=”application/x-www-form-urlencoded”是默认值 ...
  • jrdgogo
  • jrdgogo
  • 2016-07-22 16:40:21
  • 6178

input type="file"文件上传到后台读取

html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 type="text/javascript"> function upload(...
  • IT_FY_
  • IT_FY_
  • 2017-06-11 11:23:35
  • 8972
    个人资料
    持之以恒
    等级:
    访问量: 14万+
    积分: 2223
    排名: 2万+
    文章存档
    最新评论