您的位置：首页 > Web前端 > JavaScript

js实现图片转base64(兼容IE8+)

2017-04-13 09:25 1086 查看
最近做电商项目，遇到如下一个需求：

商品评价页面：用户上传图片，点击“”确定“”前，图片由前端实现base64转码（ps:由于商品评价页面可能存在多个产品，每个产品评价又可上传多张图片，所有前端img 转码可以有效的优化http请求，减小服务器的压力）

下面我们一步一步来看看demo代码：

（1）定义一个隐藏的input[type = 'file']，通过按钮触发其change事件



<center>

<!-- 图片上传表单 -->
<form>
<input type="file" class="file-hook" onchange='PreviewImage(this)' style="display: none" />
</form>

<!-- 图片容器 -->
<div class="img-wrapper">
<!-- 图片列表 -->
<div class="img-list">
<!--  <div class="img-item">
<div>
<img src="img/xin1.jpg" width="200" height="200" alt="图片描述" />
</div>
<span class="delete-hook">删除</span>
</div> -->
</div>
<!-- 上传按钮 -->
<div class="upload-btn">
<button class="upload-hook">上传图片</button>
</div>
</div>

</center>


// 上传图片
$('.upload-hook').click(function(){
$(".file-hook").click();
})

// input[type='file']监听函数
function PreviewImage(imgFile){
//传递的参数：input当前对象
//图片容器
//图片宽度
//图片高度（宽高不传：默认200x200）
var base64 = new Base64(imgFile, $('.img-list'), 200, 200);
}
（2）开始定义base64插件

*****base64插件有两块核心内容，对IE浏览器和其余主流浏览器下图片的处理





（3）最终效果如下



更多可参考： https://github.com/chuanzaizai/img-transform-base64-
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航