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

龍恩0707發表於2014-02-25
JS瀏覽器地圖

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下載

相關文章