input 图片转base64

最新推荐文章于 2024-08-18 00:36:51 发布

just_a_dream_

最新推荐文章于 2024-08-18 00:36:51 发布

阅读量1k

点赞数

分类专栏： js

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>
	 <input type="file" id="imgTest" type="file" onchange="imgChange(event)" accept=".gif,.jpg,.jpeg,.png">
	</div>
	<img src="" id="showImage" alt="">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		function imgChange(e) {
		console.log();
	    console.info(e.target.files[0]);//图片文件
	    var dom =$("#imgTest")[0];
	    console.info(dom.value);//这个是文件的路径 C:\fakepath\icon (5).png
	    console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
	    var reader = new FileReader();
	    reader.onload = (function (file) {
	        return function (e) {
	           console.info(this.result); //这个就是base64的数据了
	            $("#showImage")[0].src=this.result;
	        };
	    })(e.target.files[0]);
	    reader.readAsDataURL(e.target.files[0]);
	}
	</script>
</body>
</html>