JS将本地图片转化成base64码

JS将本地图片转化成base64码

在图片上传的时候，有时候后台需要前台上传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码这个最基础的操作，网上有很多据此的扩展，下一篇我会根据网上的一些资源再做整理拓展。　

posted on 2017-11-25 16:57 <&nbsp/> 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/zhangdiIT/p/7895749.html