JS兼容各個瀏覽器的本地圖片上傳即時預覽效果

??? 很早以前 在工作曾經碰到這么一個需求，當時也是糾結了很久，也是google了很久，沒有碰到合適的demo，今天特意研究了下這方面的的問題，所以也就做了個簡單的demo來實現 本地上傳圖片即時預覽效果。其在標準瀏覽器(firefox,chrome，IE10等其他瀏覽器)用了HTML5中的內容實現圖片即時預覽效果。在IE10以下瀏覽器用了濾鏡來解決圖片顯示問題。在看代碼之前，先讓我們來了解以下知識點：

HTML5中的FileReader對象： FileReader對象主要是把文件讀入內存中，并且讀取文件中數據。目前為止，firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10瀏覽器支持FileReader對象。它有以下5種方法：

1. readBinaryString?

2. readAsText

3. readAsDataURL? 將對象或文件中的數據讀取為一串DataURL字符串，就是將數據以一種特殊格式的URL地址形式直接讀入頁面。

4. readAsArrayBuffer

?5. abort.

而我們現在要用的是第三種，所以解釋了下，其他的具體可以看相關的資料，這里不多解釋。

IE：document.selection??? 即資料解釋如下：

????? selection?? 對象 代表了當前激活選中區，即高亮文本塊，和/或文檔中用戶可執行某些操作的其它元素。?
????? selection?? 對象的典型用途是作為用戶的輸入，以便識別正在對文檔的哪一部分正在處理，或者作為某一操作的結果輸出給用戶。?

????????? 用戶和腳本都可以創建選中區。用戶創建選中區的辦法是拖曳文檔的一部分。腳本創建選中區的辦法是在文本區域或類似對象上調用?? select?? 方法。要獲取當前選中區，請對?? document?? 對象應用?? selection?? 關鍵字。要對選中區執行操作，請先用?? createRange?? 方法從選中區創建一個文本區域對象。?
? ? ? ? ? 一個文檔同一時間只能有一個選中區。選中區的類型決定了其中為空或者包含文本和/或元素塊。盡管空的選中區不包含任何內容，你仍然可以用它作為文檔中的位置標志。

下面是JSFiddle 中的DEMO鏈接如下：

?想要查看效果，請點擊我！

下面是HTML代碼如下：

<form enctype="multipart/form-data" name="form1"><input id="f" type="file" name="f" onchange="change()" /><div class="upload">上傳圖片</div><p>預覽:</p><p><img id="preview" alt="" name="pic" /></p> </form>

JS代碼如下：

function change() {var pic = document.getElementById("preview"),file = document.getElementById("f");var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();// gif在IE瀏覽器暫時無法顯示if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){alert("圖片的格式必須為png或者jpg或者jpeg格式！"); return;}var isIE = navigator.userAgent.match(/MSIE/)!= null,isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;if(isIE) {file.select();var reallocalpath = document.selection.createRange().text;// IE6瀏覽器設置img的src為本地路徑可以直接顯示圖片if (isIE6) {pic.src = reallocalpath;}else {// 非IE6版本的IE由于安全問題直接設置img的src無法顯示本地圖片，但是可以通過濾鏡來實現pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";// 設置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認圖片pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';}}else {html5Reader(file);} }function html5Reader(file){var file = file.files[0];var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e){var pic = document.getElementById("preview");pic.src=this.result;}}

本地Demo下載

總結

以上是生活随笔為你收集整理的JS兼容各个浏览器的本地图片上传即时预览效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。