淺談本地圖片預覽功能(兼容低版本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資源.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。