chrome浏览器使用HTML5预览图片
chrome浏览器对HTML5支持的较好,使用HTML5的File相关的api,可以实现前台页面在选定图片后,不上传即可预览。代码如下:
1、前台代码,使用<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>
2、绑定点击选择文件之后的函数:
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 设定,而第一种方法貌似不可以,需要的同学可以注意一下!