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

JeffBee
500 阅读3分钟

前言

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

实现方式总结

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

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

具体实现

createObjectURL API实现

代码

<!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()两个方法

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

revokeObjectURL():用于释放由createObjectURL创建的URL对象

点击查看createObjectURL详细内容

浏览器兼容性

浏览器兼容性
支持现代浏览器及ie10+

FileReader API实现

代码

<!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方法监听读取完成状态

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资源.

avatar
文章
阅读
粉丝