在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能。
1、首先在html里定义一个input输入框:
BASE64图片: <input type="file" id="image"><br/> <button id="up">上传</button>
2、通过js将图片资源转化成base64码:
$("#up").click(function(){ var reader = new FileReader(); var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败 var file = $("#image")[0].files[0]; var imgUrlBase64; if (file) { //将文件以Data URL形式读入页面 imgUrlBase64 = reader.readAsDataURL(file); reader.onload = function (e) { //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通) if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) { alert( '上传失败,请上传不大于2M的图片!'); return; }else{ //执行上传操作 alert(reader.result); } } } });
结语:这里只是实现了将文件资源转化成base64码这个最基础的操作,网上有很多据此的扩展,下一篇我会根据网上的一些资源再做整理拓展。