html+css+js实现拍照预览上传图片功能及源码
2018-03-19 15:22:47
1278浏览
我们在做网页时经常会需要有上传图片的需求，可能是选择图片或者拍照上传，如果简单的使用<inputtype="file"/>这种方式虽然也能实现功能，但用户体验上可能会差了一些，所以本文记录了使用css+js实现图片选中后的预览及压缩上传功能，下面我们一起来看一下吧。
效果预览：
1.创建index.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>拍照上传</title>
<linkrel="stylesheet"href="index.css"/>
<scripttype='text/javascript'src='index.js'charset='utf-8'></script>
</head>
<body>
<formid="mainForm">
<divclass="content">
<divclass="label">身份证</div>
<divclass="img-area">
<divclass="container">
<inputtype="file"id='id-face'name='face'accept="image/*"/>
<divid='face-empty-result'>
<imgstyle='width:4rem'src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true"alt="">
<p>身份证正面照</p>
</div>
<imgstyle='width:100%'id='face-result'/>
</div>
<divclass="container"style='margin-top:0.5rem;'>
<inputtype="file"id='id-back'name='back'accept="image/*"/>
<divid='back-empty-result'>
<imgstyle='width:4rem'src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true"alt="">
<p>身份证反面照</p>
</div>
<imgstyle='width:100%'id='back-result'/>
</div>
</div>
</div>
<divclass="btn">
提交
</div>
</form>
</body>
</html>
2.创建index.css
body{
margin:0
}
.content{
padding:0.5rem;
display:flex;
align-items:center;
border-bottom:1px#999solid
}
.label{
width:5rem;
}
.img-area{
flex:1
}
.container{
background-color:#e7e7e7;
position:relative;
}
.containerdiv{
text-align:center;
padding:0.5rem0
}
.containerinput{
opacity:0;
filter:alpha(opacity=0);
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:9;
}
.containerp{
font-size:0.9rem;
color:#999
}
.btn{
background-color:#4363ab;
color:#fff;
text-align:center;
padding:0.5rem1rem;
width:80%;
border-radius:0.2rem;
margin:2remauto;
font-weight:600;
font-size:1.2rem
}
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{*}fileObjinputfile元素
*@param{*}el//选中后用于显示图片的元素ID
*@param{*}btnel//未选中图片时显示的按钮区域ID
*/
functiononFileChange(fileObj,el,btnel){
varwindowURL=window.URL||window.webkitURL;
vardataURL;
varimgObj=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{*}imageimg元素
*@param{*}width压缩后图片宽度
*@param{*}height压缩后图片高度
*@param{*}qua//图片质量1-100
*/
functioncompressImageTobase64(image,width,height,qua){
varquality=qua?qua/100:0.8;
varcanvas=document.createElement("canvas"),
ctx=canvas.getContext('2d');
varw=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);
vardata=canvas.toDataURL("image/jpeg",quality);
returndata;
}
//提交
functionsubmit(){
//1、form提交
//document.getElementById("mainForm").submit();
//2、压缩后ajax提交
varface_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);
varback_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);
varformData=newFormData();
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实现拍照预览上传图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。最后想要工作不累就要不断的提升自己的技能，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频教程系统，通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统，让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：559883758
【关注微信公众号获取更多学习资料】
查看更多关于“HTML5开发技术资讯”的相关文章>>
标签:
HTML5视频教程
HTML5全栈开发
HTML5培训
HTML5在线视频
前端开发
15311698296
