【无标题】

将用上传的图片转成base64并显示

需求1：上传图片并在页面上显示，请求接口时将上传的图片以base64的格式传回。
实现：使用FileReader 对象来把图片读成 base64；base64串可以直接作为图片标签的src属性值。

html代码：

 <input type="file" name="" id="chooseImage" accept=".jpg,.jpeg,.png"> 
 <img id="showImg" src="">

js代码：

$('#chooseImage').on('change',function(e){
      // 检查是否是图片
      var filePath = $(this).val(),
      fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();//获取文件后缀名
      //检查后缀名
      if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
            showError('文件格式必须为：png/jpg/jpeg');//showError是另外写的一个显示错误信息的function
            return;  
      }

      //获取并记录图片的base64编码
      var reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]); // 读出 base64
      reader.onloadend = function () {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
           var dataURL = reader.result;//base64
           // 显示图片
           $('#showImg').attr('src',dataURL);
      };
});

需求2：的样式太丑了，需要自己写一个漂亮的上传按钮。
实现：自己写一个自定义按钮，将原本的隐藏，点击自定义按钮时，再去触发的点击事件。
html代码：

    <!-- 原生上传控件 -->
    <input type="file" name="" id="chooseImage" class="hidden" accept=".jpg,.jpeg,.png">
    <!-- 自定义上传按钮 -->
    <button id="putImg" class="btnStyle">立即上传</button>
    <img id="showImg" src="">

js代码：

//自定义上传按钮的点击事件
$('#putImg').click(function(){
      $('#chooseImage').trigger('click');//触发原生上传控件
});

$('#chooseImage').on('change',function(e){
      // 检查是否是图片
      var filePath = $(this).val(),
      fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();//获取文件后缀名
      //检查后缀名
      if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
            showError('文件格式必须为：png/jpg/jpeg');//showError是另外写的一个显示错误信息的function
            return;  
      }

      //获取并记录图片的base64编码
      var reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]); // 读出 base64
      reader.onloadend = function () {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
           var dataURL = reader.result;//base64
           // 显示图片
           $('#showImg').attr('src',dataURL);
      };
});