标签：function filePath base64 无标题 reader var 图片

将用上传的图片转成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);
      };
});

标签：function,filePath,base64,无标题,reader,var,图片
来源： https://blog.csdn.net/m0_46623285/article/details/123191110

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。