JS获取本地上传图片的base64编码并读取图片的宽和高

背景

最近做了图片上传和预览的功能，总结了原生js获取本地上传图片的base64编码并读取图片的宽和高的实现方法。

实现

1、效果
假设我们的文件上传页面结构是这样的：

当我们点击附件信息处的加号时就会调出图片上传，选择一张图片进行上传。

图片上传成功

鼠标悬浮在图片上将出现放大和删除的图标。

点击放大镜我们可以预览图片

2、页面标签：
我们精简一下页面，只留下图片上传及预览所用到的页面标签，如下：

    
    
    
    


    
    
    
    

      
      <--上传后展示的图片 动态创建标签-->
      
      <--鼠标悬浮出现预览和删除按钮图标 动态创建标签-->
      

        
        
      
          
      

          +
      
    
   <--遮罩层 图片预览显示-->
    

        

            
            
            
        
    

3、js代码
我们用原生js来实现第一个步骤所描述的效果。
以下代码将添加到上个步骤的