浅谈本地图片预览功能(兼容低版本ie)

时间 2019-11-21

标签浅谈本地图片预览功能兼容版本繁體版

原文原文链接

前言

因为最近有同事问关于本地图片预览的事情,再加上本身项目中也有遇到,故收集了一下实现方式记录下来,已被方便查阅也提供给有须要的朋友.javascript

实现方式总结

目前只找到了一下几种方式,还有其余方式的望在评论区指出.css

1.createObjectURL API
2.FileReader API
3.低版本ie特有document.selection
4.上传服务端保存返回url或者转换base64

具体实现

createObjectURL API实现

代码html

<!DOCTYPE html>
<html>
<head>
	<title>本地图片预览</title>
	<style type="text/css">
		#showImg{
			margin: 0 auto;
			max-width: 200px;
			max-height: 200px;
		}
	</style>
	<script type="text/javascript">
		function fileChange(){
			let file = document.getElementById('upFile').files[0];
			const windowUrl = window.URL || window.webkitURL;
			let imngUrl = windowUrl.createObjectURL(file);
			let img = document.getElementById('showImg');
			//图片加载完成释放资源
			img.onload = function(){
				window.URL.revokeObjectURL(imngUrl);
			}
			img.src=imngUrl;
		}
	</script>
</head>
<body>
	<input type="file" id="upFile" onchange="fileChange()" />
	<div>
		<img src="" id="showImg" />
	</div>
</body>
</html>
复制代码

主要使用到 createObjectURL()和 revokeObjectURL()两个方法java

createObjectURL():用于生成文件File对象或者Blob对象的URL对象web

revokeObjectURL():用于释放由createObjectURL建立的URL对象浏览器

点击查看createObjectURL详细内容安全

浏览器兼容性bash

支持现代浏览器及ie10+

FileReader API实现

代码ui

<!DOCTYPE html>
<html>
<head>
	<title>本地图片预览</title>
	<style type="text/css">
		#showImg{
			margin: 0 auto;
			max-width: 200px;
			max-height: 200px;
		}
	</style>
	<script type="text/javascript">
		function fileChange(){
			let file = document.getElementById('upFile').files[0];
			let fileReader = new FileReader();
			fileReader.onload=function(res){
				let url = res.target.result
				document.getElementById('showImg').src=url;
			}
			fileReader.readAsDataURL(file);
		}
	</script>
</head>
<body>
	<input type="file" id="upFile" onchange="fileChange()" />
	<div>
		<img src="" id="showImg" />
	</div>
</body>
</html>
复制代码

主要用到readAsDataURL 方法把file转成base64,onload方法监听读取完成状态url

FileReader主要提供了几个方法，readAsText(),readAsDataURL(),readAsArrayBuffer(),readBinaryString()，分别表示用不一样的数据格式来读取上传的文件，并将结果保存在result属性里。FileReader还提供了一些事件可供监听。如onprogress,onload,onerror,onabort等

点击查看FileReader相关内容

浏览器兼容性

支持现代浏览器及ie10+

低版本ie特有document.selection

以上两种方法都不支持ie9及如下,本方法就介绍ie9及如下如何实现本地图片预览

selection 对象表明了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操做的其它元素。
selection 对象的典型用途是做为用户的输入，以便识别正在对文档的哪一部分正在处理，或者做为某一操做的结果输出给用户。

使用document.selection获取该选中区。若是要对选中区执行操做，则须要先调用createRange()方法

file.select();
var url = document.selection.createRange().text;
复制代码

非IE6版本的IE因为安全问题直接设置img的src没法显示本地图片，可是能够经过滤镜来实现

img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + url + "\")";
复制代码

完整代码以下

<!DOCTYPE html>
<html>
<head>
	<title>本地图片预览</title>
	<style type="text/css">
		#showImg{
			margin: 0 auto;
			max-width: 200px;
			max-height: 200px;
		}
	</style>
	<script type="text/javascript">
		function fileChange(){
			var file = document.getElementById('upFile');
			file.select();
        	var url = document.selection.createRange().text;
        	var img = document.getElementById('showImg');
			img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + url + "\")";
		}
	</script>
</head>
<body>
	<input type="file" id="upFile" onchange="fileChange()" />
	<div>
		<img src="" id="showImg" />
	</div>
</body>
</html>
复制代码

上传服务端保存返回url或者转换base64

支持性最好的方法,可是弊端也不少,服务端存储图片会形成不少无效垃圾,直接转base64返回方式更好,不须要存储图片资源,可是须要提早与服务端交互,拿到转换的base64资源.