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 设定，而第一种方法貌似不可以，需要的同学可以注意一下！