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;

     }

 }

 

頁面內容來至網絡轉載