网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > html5

html5身份证照片上传及预览缩略图-附源码

2021/3/28 10:52:43

html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…

html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。

  • 调用FileReader对象的方法


FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。


image.png

readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。

readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。


  •  处理事件


FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。


image.png

文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。


<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
   <title>图片生成</title>
  <style>
   * {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
 
body {
font-size: 12px;
font-family: Arial, Verdana;
color: #fff;
font-weight: 100;
cursor: default;
background:#FFFFFF;
min-width:320px;
}
textarea,select,input[type="text"],input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
appearance:none;
outline:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
border-radius:0;
background: none;
}
.head1{
width:100%;
height:50px;
line-height:50px;
color:#323232;
background:#F7F7F7;
text-align:center;
font-family:"微软雅黑";
border-bottom:5px solid #EFEFEF;
}
.cancel{
width:50px;
height:50px;
color:#989898;
position:absolute;
}
.save_btn{
margin:20px auto;
border:none;
height:40px;
width:95%;
background:#ce1b1b!important;
border-radius:3px!important;
font-family:"微软雅黑";
font-size:16px;
color:white;
line-height:40px;
}
.info_list{
width:100%;
height:50px;
border-bottom:1px solid #F2F2F2;
}
.list_left{
width:27%;
margin-left:3%;
height:50px;
font-family:"微软雅黑";
font-size:16px;
color:#636363;
line-height:50px;
float:left;
}
.list_left2{
width:97%;
margin-left:3%;
height:50px;
font-family:"微软雅黑";
font-size:16px;
color:#636363;
line-height:50px;
float:left;
}
.list_left2 span{
color:#A04E52;
font-size:12px;
margin-left:5px;
}
.list_right{
width:65%;
margin-right:3%;
height:50px;
color:#636363;
line-height:50px;
float:right;
}
.edit{
width:100%;
height:50px;
color:#898989;
font-family:"微软雅黑";
font-size:16px;
border:none;
}
.id_img_wp{
width:94%;
margin:0 auto;
min-height:30px;
}
.img_wp{
width:40%;
margin:0 5% 0 5%;
float:left;
cursor:pointer;
}
.img_wp img{
width:100%;
height:100%;
}
.img_intro{
color:#383838;
text-align:center;
font-family:"微软雅黑";
padding:10px 0 10px 0;
}
.cf{
clear:both;
}
  </style>
 <script src="http://zmxy.keziw.com/js/jquery-1.11.3.js"></script>
 </head>
 <body>
<div>
<div>〈</div>
  购直销权
  </div>
  <form action="" οnsubmit="return checkForm()">
  <div>
<div>店主</div>
<div>
<input type="text" id="user_name"/>
</div>
 </div>
  <div>
<div>身份证号码</div>
<div>
<input type="text" id="card_no"/>
</div>
 </div>
  <div>
<div>电话号码</div>
<div>
<input type="text" id="call_no"/>
</div>
 </div>
  <div style="border-bottom:none;">
<div>身份证上传<span>(请上传身份证正反面,图片保持清晰)</span></div>
 </div>
 <div>
<input type="file" accept="image/*" οnchange="getzImg(this)" style="display:none" value="" id="img_z"/>
<input type="file" accept="image/*" οnchange="getfImg(this)" value="" id="img_f" style="display:none"/>
<div οnclick="zhengmian()">
<img src="up.png" id="zmz"/>
<p>身份证正面照</p>
</div>
<div οnclick="fanmian()">
<img src="up.png" id="fmz"/>
<p>身份证反面照</p>
</div>
<div></div>
 </div>
  <p style="text-align:center;">
  <input type="submit" value="确认申请"/>
  </p>
  </form>
   
  <script>
  $(function(){
  $('.img_wp img').height($('.img_wp img').width()*0.6);
   $(window).resize(function(){
  $('.img_wp img').height($('.img_wp img').width()*0.6);
  })
  })
//正面
function zhengmian(){
$('#img_z').click();
}
function getzImg(imgFile){
 
    var file = imgFile.files[0];
 
    var reader = new FileReader();
    reader.readAsDataURL(file);//将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件
    reader.onload = function(e){
$("#zmz").attr("src",e.target.result);
    }
}
//反面
function fanmian(){
$('#img_f').click();
}
function getfImg(imgFile){
 
    var file = imgFile.files[0];
 
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
$("#fmz").attr("src",e.target.result);
    }
}
//申请
function checkForm(){
if($('#live_name').val().length<1){
$('#live_name').focus();
alert('请输入直播店名');
return false;
}
if($('#user_name').val().length<1){
$('#user_name').focus();
alert('请输入店主名');
return false;
} 
var cardNo=$('#card_no');
if(cardNo.val() &&  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(cardNo.val())){
}else{
cardNo.focus();
alert('身份证号码格式不正确!');
return false;
}
var call_no = $('#call_no');
if(call_no.val() && /^1[3|4|5|7|8]\d{9}$/.test(call_no.val())){
} else{
call_no.focus();
alert('手机号码格式不正确!');
return false;
}
if($('#img_z').val()==null||$('#img_z').val()==''){
     alert('请上传身份证正面照!');
     return false;
    }
if($('#img_f').val()==null||$('#img_f').val()==''){
     alert('请上传身份证反面照!');
     return false;
    }
if($('#sells').val().length<1){
$('#sells').focus();
alert('请输入主营商品!');
return false;
}
//提交表单
}
  </script>
 </body>
</html>


上面是一个完整的html5上传身份证照片的源码,仅供大家参考!


相关资讯

  • html5新增元素document.queryselector属性

    document.queryselector其实也不算是html5的新增元素,它只是继承了html4的属性,今天我们就来说说document.queryselector属性如何使用? 先看一个实例,结合实例分析一下:<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…

    2021/5/9 14:06:38
  • 用实例告诉你html5画图功能如何使用?附源码

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题…

    2021/3/21 14:51:36
  • 实例告诉您HTML5的WEB SQL数据库如何使用?含源码

    Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关…

    2021/3/9 22:21:35
  • HTML5如何实现浏览器页面全屏显示及退出全屏的效果?

    在越来越真实的web应用程序中,JavaScript也变得越来越给力.FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.在线演示Demo: Fullscreen API Example(在此Demo中,可…

    2021/3/9 22:17:42