FileReader 中的readAsDataURL 选择图片文件后即使预览图片

最新推荐文章于 2024-07-26 08:29:23 发布

右想小小怪

最新推荐文章于 2024-07-26 08:29:23 发布

阅读量2.1w

点赞数 13

本文链接：https://blog.csdn.net/qq_42705221/article/details/83750352

版权

1：FileReader : 读取文件内容
           readAsText() 读取文本文件，(可以使用Txt打开的文件)
           readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
           readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件
           abort: 中断读取

2：FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
           onabort:读取文件断片时触发
           onerror:读取文件错误时触发
           onload:文件读取成功时触发
           onloadend:文件读取完毕之后，不管成功还是失败触发
           onloadstart: 开始读取文件时触发
           onprogress:读取文件过程中触发

3：FileReader 中的readAsDataURL 选择图片文件后即使预览图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form>
			<input type="file" id="file1" name="file1" />
			
			<input type="submit" />
			<img id="img1" src=""/>
		</form>
		
		<script>
			//选择图片后，预览图片
			
			document.getElementById("file1").onchange=function(){
				//1 创建文件读取对象
				var reader=new FileReader();
				
				//文件存储在file表单元素的files属性中，它是一个数组
				//没有返回值，但是读取完毕后，将读取结果存储在对象的result中
				var fil=document.getElementById("file1").files;
				reader.readAsDataURL(fil[0]);
				
				//当读取成功后触发
				reader.onload=function(){
					document.getElementById("img1").src=reader.result;
				};
			};
		</script>
	</body>
</html>