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

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>

 

 

  • 13
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值