【超详细】js上传图片预览(附带jq)

记一个前端上传图片预览的功能

  1. 获取file文件
  2. 创建FileReader对象
  3. 读取FileReader.readAsDataURL(file)转为base64位编码
  4. 读取成功时触发onload事件,数据在result属性中,替换src

这只是我个人用来记忆的流程,可能不严谨。

结构

<div onclick="file.click()" class="box">
			<img id="img" src="img/LC_icon_user_fill_3.png" />
			<span>+</span>
			<input type="file" id="file" style="display: none;"/>
</div>

原生js:

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容
官方说法的点这里

console.log(typeof FileReader=="undefined");//浏览器不支持FileReader会返回undefined,可以用来判断
document.getElementById("file").onchange=function(){//选择完图片会触发这个值改变事件
				let file=document.getElementById("file").files[0];//获取文件
				if(!/image\/\w+/.test(file.type)){//判断文件类型是否是图片
        			alert("上传类型只能为图片");  
       				 return false;  
  				}  
				let reader=new FileReader();//创建FileReader 对象
				console.log(reader.readyState);//0,没读取文件时的状态,可以忽略
				reader.readAsDataURL(file);//读取文件转为base64位编码
				console.log(reader.readyState);//1,正在读取文件时的状态,可以忽略
				reader.onload=function(){//文件读取成功后触发onload事件
				console.log(reader.readyState);//2,读取文件成功时的状态,可以忽略
					document.getElementById("img").setAttribute("src",this.result);//替换src地址
					document.getElementById("img").style.display="block";
					document.getElementsByClassName("box")[0].querySelectorAll("span")[0].style.display="none";
				}
			}

FileReader事件处理:

事件描述
FileReader.onabort处理abort事件。该事件在读取操作被中断时触发。
FileReader.onerror处理error事件。该事件在读取操作发生错误时触发。
FileReader.onload处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart处理loadstart事件。该事件在读取操作开始时触发。
FileReader.onloadend处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。
FileReader.onprogress处理progress事件。该事件在读取Blob时触发。

jquery:

$("#file").change(function(){
				let file=$(this)[0].files[0];
				if(!/image\/\w+/.test(file.type)){
        			alert("上传类型只能为图片");  
       				 return false;  
  				} 
				/*this加0,是因为$(this)返回的是jquery对象加了0返回的才是<input type="file" id="file" style="display: none;"/>这个节点*/
				let reader=new FileReader();
				reader.readAsDataURL(file);
				reader.onload=function(){
					$("#img").attr("src",$(this)[0].result).css("display","block");
					$(".box span").css("display","none");
				}
			})
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值