纯前端（HTML+CSS）实现上传图片前预览功能

最新推荐文章于 2024-05-16 03:05:46 发布

IT阿剂

最新推荐文章于 2024-05-16 03:05:46 发布

阅读量4.4k

点赞数 5

分类专栏：前端文章标签： css js jquery html html5

本文链接：https://blog.csdn.net/qq_42402086/article/details/107520470

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

最近项目中有个新的需求需要上传身份证进行实名认证，由于我们前端前段时间离职而新的人还没招到所以这个东西需要我去弄，经过一番研究我准备了两套实现方案。在实现的过程中我发现了前端一个很好用的WEB API接口（ps:之前也搞过一段时间前端但是近两年对前端知识关注不够啊）FileReader 对象。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容它不能用于从文件系统中按路径名简单地读取文件。要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

PS: 此特性在 Web Worker 中可用。

废话不多说上代码：


<!doctype html>
<html lang="en">
 <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://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
<div class="head1">
    <div class="cancel">〈</div>
  实名认证
  </div>
  <form action="" onsubmit="return checkForm()">
  <div class="info_list">
    <div class="list_left">姓名</div>
    <div class="list_right">
        <input type="text" class="edit" id="user_name"/>
    </div>
 </div>
  <div class="info_list">
    <div class="list_left">身份证号码</div>
    <div class="list_right">
        <input type="text" class="edit" id="card_no"/>
    </div>
 </div>
  <div class="info_list">
    <div class="list_left">电话号码</div>
    <div class="list_right">
        <input type="text" class="edit" id="call_no"/>
    </div>
 </div>
  <div class="info_list" style="border-bottom:none;">
    <div class="list_left2">身份证上传<span>(请上传身份证正反面，图片保持清晰)</span></div>
 </div>
 <div class="id_img_wp">
    <input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z"/>
    <input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" style="display:none"/>
    <div class="img_wp" onclick="zhengmian()">
        <img src="./images/idcard1.png" id="zmz"/>
        <p class="img_intro">身份证正面照</p>
    </div>

    <div class="img_wp" onclick="fanmian()">
        <img src="./images/idcard0.png" id="fmz"/>
        <p class="img_intro">身份证反面照</p>
    </div>
    <div class="cf"></div>
 </div>

  <p style="text-align:center;">
  <input type="submit" value="立即认证" class="save_btn"/>
  </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($('#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;
        }
       
        //提交表单
    }
  </script>
 </body>

上测试图：

ps:这里身份证上传测试随便用了两张图

希望此次分享能帮助到有需要的人。

所谓勇者,是心有所惧,唯自知尔！

IT阿剂

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
2
评论
纯前端（HTML+CSS）实现上传图片前预览功能

最近项目中有个新的需求需要上传身份证进行实名认证，由于我们前端前段时间离职而新的人还没招到所以这个东西需要我去弄，经过一番研究我准备了两套实现方案。在实现的过程中我发现了前端一个很好用的WEB API接口（ps:之前也搞过一段时间前端但是近两年对前端知识关注不够啊）FileReader对象。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。其中File对象可以是来自用户在一个...
复制链接

扫一扫