【超详细】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");
				}
			})