jq实现input['file']标签图片转base64数据

六月初六月初 JavaScipt 2019-10-22 16:57:01

图片转base64操作，在前端开发中非常常见，那么在H5中我们要如何实现将input['file']上传的图片立即转换成需要的base64数据呢？

最终效果如图：


截图实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<input type="file" name="" id="upload_file" value="" />

		<script>
			$("#upload_file").change(function() {
				var file = this.files[0];
				if (window.FileReader) {
					var reader = new FileReader();
					reader.readAsDataURL(file);
					//监听文件读取结束后事件    
					reader.onloadend = function(e) {
						// 图片base64
						console.log(e.target.result);
					};
				}
			});
		</script>
	</body>
</html>

获取选择文件的第一条信息：

var file = this.files[0];

FileReader 对象基础介绍：  

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader.onloadend

处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！