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

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

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

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

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

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

  废话不多说上代码：

 
  
  
  
  
  
  
  
  
  
   
  
 
 
 

    
〈
  实名认证
  
  

  

    
姓名
    

        
    
 
  

    
身份证号码
    

        
    
 
  

    
电话号码
    

        
    
 
  

    
身份证上传(请上传身份证正反面，图片保持清晰)
 
 

    
    
    

        
        
身份证正面照
    

    

        
        
身份证反面照
    
    

 

  

  
  
  

  
 

上测试图：

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

 

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

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