chrome瀏覽器使用HTML5預覽圖片

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

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

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

二、綁定點擊選擇文件以後的函數：

 1 $('#fileToUpload').change(function() { 
 2          var div = document.createElement('div');
 3       var img = document.createElement('img');//建立 img 對象
 4       
 5       window.URL = window.URL || window.webkitURL;
 6       var imgFile=document.getElementById('fileToUpload');
 7       if(window.URL){
 8             //File API
 9           img.src = window.URL.createObjectURL(imgFile.files[0]); //建立一個object URL，並非你的本地路徑
10           
11           img.onload = function(e) {
12              window.URL.revokeObjectURL(this.src); //圖片加載後，釋放object URL
13           }
14           
15         }
16       div.appendChild(img);
17 }

上述代碼先建立了一個 div 元素，而後又建立了一個 img ，並將 img 的 src 屬性設置爲所選文件（注意是一個 object URL，若是直接使用相似 「file:///c:/a.jpg」 的格式是不行的），而後將 img 添加到 div 中。

以上僅爲示例代碼。

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

 1 $('#fileToUpload').change(function() {
 2       var div = document.createElement('div');
 3       var img = document.createElement('img');//建立 img 對象
 4       
 5       var imgFile=document.getElementById('fileToUpload');
 6      var reader = new FileReader();
 7             reader.readAsDataURL(imgFile.files[0]);
 8             reader.onload = function(e){                                      
 9         img.src = e.target.result;
10             };
11       div.appendChild(img);
12 }

即便用 FileReader 的 readAsDataURL 方法，爲 img 設置其 src.

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