搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > WEB前端自学所 > html+css+js 实现拍照预览上传图片功能

html+css+js 实现拍照预览上传图片功能

WEB前端自学所 2018-02-06

我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传。本文记录了使用css+js实现图片选中后的预览及压缩上传功能,需要的朋友参考下吧!

前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用<input type="file"/>这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩上传功能,部分带来来源于网络,此处做了记录整理。

效果预览:

html+css+js 实现拍照预览上传图片功能

1.创建index.html

<!DOCTYPE html>
<html>
     <head>
         <meta charset= "UTF-8" >
         <meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
         <title>拍照上传</title>
         <link rel= "stylesheet" href= "index.css" />
         <script type= 'text/javascript' src= 'index.js' charset= 'utf-8' ></script>
     </head>
     <body>
          <form id= "mainForm" >
             <div class= "content" >
                 <div class= "label" >身份证</div>
                 <div class= "img-area" >
                     <div class= "container" >
                         <input type= "file" id= 'id-face' name= 'face'  accept= "image/*" />
                         <div id= 'face-empty-result' >
                             <img style= 'width:4rem' src= "https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt= "" >
                             <p>身份证正面照</p>
                         </div>
                         <img style= 'width: 100%' id= 'face-result' />
                     </div>
                     <div class= "container" style= 'margin-top:0.5rem;' >
                         <input type= "file" id= 'id-back' name= 'back' accept= "image/*" />
                         <div id= 'back-empty-result' >
                             <img style= 'width:4rem' src= "https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt= "" >
                             <p>身份证反面照</p>
                         </div>
                         <img style= 'width: 100%' id= 'back-result' />
                     </div>
                 </div>
             </div>
             <div class= "btn" >
                 提交
             </div>
          </form>
     </body>
</html>

html+css+js 实现拍照预览上传图片功能

2.创建index.css

body{
     margin: 0
}
.content{
     padding:0.5rem;
     display: flex;
     align-items: center;
     border-bottom: 1px #999 solid
}
.label{
     width:5rem;
}
.img-area{
     flex:1
}
.container{
     background-color: #e7e7e7;
     position: relative;
}
.container div{
     text-align: center;
     padding:0.5rem 0
}
.container input{
     opacity:0;
     filter:alpha(opacity=0);
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 9;
}
.container p{
     font-size: 0.9rem;
     color: #999
}
.btn{
     background-color: #4363ab;
     color: #fff;
     text-align: center;
     padding: 0.5rem 1rem;
     width:80%;
     border-radius: 0.2rem;
     margin: 2rem auto;
     font-weight: 600;
     font-size: 1.2rem
}

html+css+js 实现拍照预览上传图片功能

3.创建index.js

window.onload= function (){
     document.getElementById( "id-face" ).addEventListener( "change" , function (){      
         onFileChange( this , "face-result" , "face-empty-result" )
     });
     document.getElementById( "id-back" ).addEventListener( "change" , function (){      
         onFileChange( this , "back-result" , "back-empty-result" )
     });
     document.getElementsByClassName( "btn" )[0].addEventListener( "click" , function (){      
         submit();
     });
};
/**
  * 选中图片时的处理
  * @param {*} fileObj input file元素
  * @param {*} el //选中后用于显示图片的元素ID
  * @param {*} btnel //未选中图片时显示的按钮区域ID
  */
function onFileChange(fileObj,el,btnel){
     var windowURL = window.URL || window.webkitURL;
     var dataURL;
     var imgObj = document.getElementById(el);
     document.getElementById(btnel).style.display= "none" ;
     imgObj.style.display= "block" ;
     if (fileObj && fileObj.files && fileObj.files[0]) {
         dataURL = windowURL.createObjectURL(fileObj.files[0]);
         imgObj.src=dataURL;
     } else {
         dataURL = fileObj.value;
         imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" ;
         imgObj.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = dataURL;
     }
}
/**
  * 将图片压缩后返回base64格式的数据
  * @param {*} image img元素
  * @param {*} width 压缩后图片宽度
  * @param {*} height 压缩后图片高度
  * @param {*} qua //图片质量1-100
  */
function compressImageTobase64(image,width,height,qua){
     var quality = qua ? qua / 100 : 0.8;
     var canvas = document.createElement( "canvas" ),    
         ctx = canvas.getContext( '2d' );    
     var w = image.naturalWidth,    
         h = image.naturalHeight;    
     canvas.width = width||w;    
     canvas.height = height||h;    
     ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);
     var data = canvas.toDataURL( "image/jpeg" , quality);    
     return data;
}
//提交
function submit(){
     //1、form提交
     //document.getElementById("mainForm").submit();
     //2、压缩后ajax提交
     var face_data=compressImageTobase64(document.getElementById( "face-result" ),200,100,90);
     var back_data=compressImageTobase64(document.getElementById( "back-result" ),200,100,90);
     var formData = new FormData(); 
     formData.append( "face" ,face_data);
     formData.append( "back" ,back_data);
     //需引入jQuery
     $.ajax({
         url: "/地址" ,
         type: 'POST' ,
         cache: false ,
         data: formData,
         timeout:180000,
         processData: false ,
         contentType: false ,
         success: function (r){
         },
         error: function (r){ 
         }
    });
}

总结:以上所述是小编给大家介绍的html+css+js 实现拍照预览上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言(小编Q379850585),小编会及时回复大家的。


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《html+css+js 实现拍照预览上传图片功能》的版权归原作者「WEB前端自学所」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注WEB前端自学所微信公众号

WEB前端自学所微信公众号:li-379850585

WEB前端自学所

手机扫描上方二维码即可关注WEB前端自学所微信公众号

WEB前端自学所最新文章

精品公众号随机推荐