【Js应用实例】图片预览

最新推荐文章于 2023-06-14 21:13:23 发布

放心飞吧

最新推荐文章于 2023-06-14 21:13:23 发布

阅读量705

点赞数

分类专栏： Javascript 文章标签： js图片预览

本文链接：https://blog.csdn.net/dream361/article/details/55804922

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片预览</title>
</head>
<body>
	<!-- 
		文件上传在现代浏览器是基于FileReader API
		基于浏览器的安全策略，file标签在现在浏览器中已获取不到真实路径。而低版本ie可以获取到真实路径
		
		FileReader有四种读取文件的方式
			1.readAsBinaryString读取为二进制码
			2.readAsDataURL 读取为DataURL
			3.readAsText读取为文本
			4.readAsArrayBuffer 读取为队列缓存
		图片上传后的需求，需要将图片读取为DataURL,DataURL的固定格式，
		例如：data:[文件格式];base64,[文本流base64编码]
			1.jpg格式: data:image/jpeg;base64,/9j/4...
			2.png:data:image/png;base64,iVBORw...
			3.gif:data:image/gif;base64,R0IGOD...
	 -->
	 <input id="files" type="file" οnchange="previewImage(this,'prvid')",multiple="multiple"/>
	 <div id="prvid">预览容器</div>
</body>
<script type="text/javascript">
	function previewImage(file,prvid){
		/*
			file:file控件
			prvid:图片预览容器
		*/
		var tip = "Expect jpg or png or gif!";
		var filters = {
				"jpeg":"/9j/4",
				"gif":"R0IGOD",
				"png":"iVBORw"
		};
		var prvbox = document.getElementById(prvid);
		prvbox.innerHTML = "";
		//浏览器支持FileReader
		if(window.FileReader){
			for(var i=0,f;f=file.files[i];i++){
				var fr = new FileReader();
				fr.onload = function(e){
					var src = e.target.result;
					//验证没通过
					if(!validateImg(src)){
						alert(tip);
					}else{
					//验证通过
						showPrvImg(src);
					}
				};
				fr.readAsDataURL(f);
			}
		//浏览器不支持FileReader
		}else{
			if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)){
				alert(tip);
			}else{
				showPrvImg(file.value);
			}
		}
		//验证图片
		function validateImg(data){
			var pos = data.indexOf(",")+1;
			for(var e in filters){
				if(data.indexOf(filters[e])===pos){
					return e;
				}
			}
			return null;
		}
		//展示图片
		function showPrvImg(src){
			var img = document.createElement("img");
			img.src = src;
			prvbox.appendChild(img);
		}
	}
</script>
</html>

放心飞吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Js应用实例】图片预览

图片预览 <!-- 文件上传在现代浏览器是基于FileReader API 基于浏览器的安全策略，file标签在现在浏览器中已获取不到真实路径。而低版本ie可以获取到真实路径 FileReader有四种读取文件的方式 1.readAsBinaryString读取为二进制码 2.readAsDataURL 读取为DataURL 3.readAsText读取
复制链接

扫一扫

专栏目录