chrome瀏覽器使用HTML5預覽圖片

chrome瀏覽器對HTML5支持的較好，使用HTML5的File相關的api，可以實現前台頁面在選定圖片后，不上傳即可預覽。代碼如下：

1、前台代碼，使用<input type="file">標簽進行文件的選擇，其 accept 屬性用於過濾文件類型，此處選擇幾種圖片格式的文件。

<div class="row">
            <label for="fileToUpload">請選擇一個文件：</label>
            <br>
            <input type="file" name="fileToUpload" id="fileToUpload" accept="image/gif,image/jpeg,image/x-png,image/tiff,image/x-ms-bmp" />
        </div>

2、綁定點擊選擇文件之后的函數：

$('#fileToUpload').change(function() { 
         var div = document.createElement('div');
      var img = document.createElement('img');//創建 img 對象
      
      window.URL = window.URL || window.webkitURL;
      var imgFile=document.getElementById('fileToUpload');
      if(window.URL){
            //File API
          img.src = window.URL.createObjectURL(imgFile.files[0]); //創建一個object URL，並不是你的本地路徑
          
          img.onload = function(e) {
             window.URL.revokeObjectURL(this.src); //圖片加載后，釋放object URL
          }
          
        }
      div.appendChild(img);
}

上述代碼先創建了一個 div 元素，然后又創建了一個 img ，並將 img 的 src 屬性設置為所選文件（注意是一個 object URL，如果直接使用類似 “file:///c:/a.jpg” 的格式是不行的），然后將 img 添加到 div 中。

以上僅為示例代碼。

通過 js 來綁定 img 的 src ，也可以使用另外一種方式：

$('#fileToUpload').change(function() {
      var div = document.createElement('div');
      var img = document.createElement('img');//創建 img 對象
      
      var imgFile=document.getElementById('fileToUpload');
     var reader = new FileReader();
            reader.readAsDataURL(imgFile.files[0]);
            reader.onload = function(e){                                      
        img.src = e.target.result;
            };
      div.appendChild(img);
}

即使用 FileReader 的 readAsDataURL 方法，為 img 設置其 src.

值得注意的是，第二種方法所讀取的 reader.result 可以用於方法或消息的發送，比如在 chrome 的一個 tab 中，通過 chrome.tabs.sendMessage 方法發送出去，在另一個 tab 中通過 chrome.extension.onMessage.addListener(function(msg)) 接收，接收到的 msg 中的相關數據，依然可以用於所在 tab 中的一個 img 元素的 src 設定，而第一種方法貌似不可以，需要的同學可以注意一下！