zoukankan      html  css  js  c++  java

  • html5 选择多张图片在页面内预览并上传到后台

    版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/huangxin112/article/details/74956462

    需求：点击选择图片(可选多张)，确定后将选择的图片显示在页面上，点击提交将图片提交给后台。

    效果图：

    [html] view plain copy
     
    1. <label>请选择一个图像文件：</label>  
    2. <input type="file" id="pic_selector" multiple/> <!--multiple，可选择多张图片-->  
    3. <button>提交</button>  

    html内容，主要是multiple属性，支持选择多个文件。是HTML5属性，注意兼容问题(IOS支持，安卓不支持)。

    js内容：

    [javascript] view plain copy
     
    1. function readFile(){  
    2.         dataArr = { data : [] };  
    3.         fd = new FormData();  
    4.         var iLen = this.files.length;  
    5.         for(var i=0;i<iLen;i++){   
    6.             if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断所选文件格式  
    7.                 return alert("上传的图片格式不正确，请重新选择");  
    8.             }  
    9.          var reader = new FileReader();  
    10.          fd.append(i,this.files[i]);  
    11.          reader.readAsDataURL(this.files[i]);  //转成base64  
    12.          var fileName = this.files[i].name;  
    13.          reader.onload = function(e){  
    14.             var imgMsg = {  
    15.                 name : fileName,//获取文件名  
    16.                 base64 : this.result   //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里  
    17.           }  
    18.             dataArr.data.push(imgMsg);  
    19.              result = '<div style="display:none" class="result" ><img src="'+this.result+'" alt=""/></div>';  
    20.              div = document.createElement('div');  
    21.              div.innerHTML = result;  
    22.              div['className'] = 'float';  
    23.              document.getElementsByTagName('body')[0].appendChild(div);  　　//插入页面  
    24.     var img = div.getElementsByTagName('img')[0];  
    25.     img.onload = function(){  
    26.         var nowHeight = ReSizePic(this); //设置图片大小  
    27.         this.parentNode.style.display = 'block';  
    28.         var oParent = this.parentNode;  
    29.         if(nowHeight){  
    30.             oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';  
    31.         }  
    32.     }  
    33.          }  
    34.      }  
    35. }  

    以上函数实现选择图片并显示在桌面上，其中img.onload的作用是将选中的图片进行缩放，放在宽高相等的div中并居中显示，可根据自己需求删除这句。

    下面附上ReSizePic函数

    [javascript] view plain copy
     
    1. function ReSizePic(ThisPic) {  
    2.     var RePicWidth = 200; //这里修改为您想显示的宽度值  
    3.   
    4.     var TrueWidth = ThisPic.width; //图片实际宽度  
    5.     var TrueHeight = ThisPic.height; //图片实际高度  
    6.       
    7.     if(TrueWidth>TrueHeight){  
    8.         //宽大于高  
    9.         var reWidth = RePicWidth;  
    10.         ThisPic.width = reWidth;  
    11.         //垂直居中  
    12.         var nowHeight = TrueHeight * (reWidth/TrueWidth);  
    13.         return nowHeight;  //将图片修改后的高度返回，供垂直居中用  
    14.     }else{  
    15.         //宽小于高  
    16.         var reHeight = RePicWidth;  
    17.         ThisPic.height = reHeight;  
    18.     }  
    19. }  


    以上就实现了图片选择展示，并将所选图片转成base64保存在dataArr中，之后用ajax上传即可。

    [javascript] view plain copy
     
    1. function send(){  
    2.     $.ajax({  
    3.         url : 'http://...',  
    4.         type : 'post',  
    5.         data : dataArr,  
    6.         dataType: 'json',  
    7.         //processData: false,   用FormData传fd时需有这两项  
    8.         //contentType: false,  
    9.         success : function(data){  
    10.             console.log('返回的数据：'+JSON.stringify(data))  
    11.       　}   
    12.     })  
    13. }  
    14.   
    15. var oBtn = document.getElementsByTagName('button')[0];  
    16. oBtn.onclick=function(){  
    17.         if(!input.files.length){  
    18.             return alert('请先选择文件');  
    19.         }  
    20. send();  
    21. }  


    至于用FormData上传，方法大同小异，这里不再演示了。

    下面是完整代码

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>showImages</title>  
    6. <style type="text/css">  
    7.     .float{  
    8.         float:left;  
    9.         width : 200;  
    10.         height: 200;  
    11.         overflow: hidden;  
    12.         border: 1px solid #CCCCCC;  
    13.         border-radius: 10px;  
    14.         padding: 5px;  
    15.         margin: 5px;  
    16.     }  
    17.     img{  
    18.         position: relative;  
    19.     }  
    20.     .result{  
    21.          200px;  
    22.         height: 200px;  
    23.         text-align: center;  
    24.         box-sizing: border-box;  
    25.     }  
    26.       
    27. </style>  
    28.   
    29.   
    30. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
    31. <script type="text/javascript">  
    32.   
    33.   
    34. window.onload = function(){  
    35.     var input = document.getElementById("file_input");  
    36.     var result,div;  
    37.    
    38.     if(typeof FileReader==='undefined'){  
    39.         result.innerHTML = "抱歉，你的浏览器不支持 FileReader";  
    40.         input.setAttribute('disabled','disabled');  
    41.     }else{  
    42.         input.addEventListener('change',readFile,false);  
    43.     }　　　　　//handler  
    44.   
    45.      
    46.       
    47.       
    48.     var dataArr = null; //直接传base64数据  
    49.     var fd = null;  //FormData方式发送请求  
    50.       
    51.     function readFile(){  
    52.             dataArr = { data : [] };  
    53.             fd = new FormData();  
    54.             var iLen = this.files.length;  
    55.         for(var i=0;i<iLen;i++){  
    56.             if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式  
    57.                 return alert("上传的图片格式不正确，请重新选择");  
    58.             }  
    59.             var reader = new FileReader();  
    60.             fd.append(i,this.files[i]);  
    61.             reader.readAsDataURL(this.files[i]);  //转成base64  
    62.             var fileName = this.files[i].name;  
    63.             reader.onload = function(e){  
    64.                     var imgMsg = {  
    65.                         name : fileName,//获取文件名  
    66.                         base64 : this.result   //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里  
    67.                 }  
    68.                     dataArr.data.push(imgMsg);  
    69.                 result = '<div style="display:none" class="result" ><img src="'+this.result+'" alt=""/></div>';  
    70.                 div = document.createElement('div');  
    71.                 div.innerHTML = result;  
    72.                 div['className'] = 'float';  
    73.                 document.getElementsByTagName('body')[0].appendChild(div);  　　//插入dom树  
    74.                 var img = div.getElementsByTagName('img')[0];  
    75.                 img.onload = function(){  
    76.                     var nowHeight = ReSizePic(this); //设置图片大小  
    77.                     this.parentNode.style.display = 'block';  
    78.                     var oParent = this.parentNode;  
    79.                     if(nowHeight){  
    80.                         oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';  
    81.                     }  
    82.                 }  
    83.             }  
    84.         }  
    85.           
    86.           
    87.     }  
    88.       
    89.       
    90.     function send(){  
    91.         $.ajax({  
    92.             url : 'http://123.206.89.242:9999',  
    93.             type : 'post',  
    94.             data : dataArr,  
    95.             dataType: 'json',  
    96.             //processData: false,   用FormData传fd时需有这两项  
    97.             //contentType: false,  
    98.             success : function(data){  
    99.                 console.log('返回的数据：'+JSON.stringify(data))  
    100.           　}   
    101.         })  
    102.     }  
    103.       
    104.     var oBtn = document.getElementsByTagName('button')[0];  
    105.     oBtn.onclick=function(){  
    106.             if(!input.files.length){  
    107.                 return alert('请先选择文件');  
    108.             }  
    109.         send();  
    110.     }  
    111. }  
    112. /*  
    113.  用ajax发送fd参数时要告诉jQuery不要去处理发送的数据，  
    114.  不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误，  
    115.  也就是非法调用，所以要加上“processData: false,contentType: false,”  
    116.  * */  
    117.   
    118.               
    119. function ReSizePic(ThisPic) {  
    120.     var RePicWidth = 200; //这里修改为您想显示的宽度值  
    121.   
    122.     var TrueWidth = ThisPic.width; //图片实际宽度  
    123.     var TrueHeight = ThisPic.height; //图片实际高度  
    124.       
    125.     if(TrueWidth>TrueHeight){  
    126.         //宽大于高  
    127.         var reWidth = RePicWidth;  
    128.         ThisPic.width = reWidth;  
    129.         //垂直居中  
    130.         var nowHeight = TrueHeight * (reWidth/TrueWidth);  
    131.         return nowHeight;  //将图片修改后的高度返回，供垂直居中用  
    132.     }else{  
    133.         //宽小于高  
    134.         var reHeight = RePicWidth;  
    135.         ThisPic.height = reHeight;  
    136.     }  
    137. }  
    138.   
    139.   
    140.               
    141. </script>  
    142. </head>  
    143.     <body ng-controller="Aaa" >  
    144.             <div class="container">  
    145.                 <label>请选择一个图像文件：</label>  
    146.                 <input type="file" id="file_input" multiple/> <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->  
    147.                 <button>提交</button>  
    148.             </div>  
    149.     </body>  
    150. </html>  
     
  • 相关阅读:
    mybatis-plus学习
    代码规范系列
    Error:Abnormal build process termination:
    SpringBoot常用注解
    git深度学习
    spring中创建bean的方式
    jenkis构建“ERROR: Error fetching remote repo ‘origin’“
    tensor2tensor安装bug修复
    Swin-Transformer代码工程进行物体检测
    Linux常用命令
  • 原文地址：https://www.cnblogs.com/lijiageng/p/8427942.html
Copyright © 2011-2022 走看看