html5实现本地图片预览功能
1.利用FileReader进行图片本地预览
FileReader类型实现的是一种异步文件读取机制,用来把文件读入内存,并且读取文件中的数据。各大浏览器的支持情况:
构造方法
var reader = new <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader" title="The documentation about this has not yet been written; please consider contributing!" class="new" style="color: #990000; margin: 0px; border: 0px; padding: 0px;">FileReader()</a>;
为了读取文件中的数据,FileReader提供了如下几个方法:
readAsText(file,encoding):以纯文本的形式读取文件,将读取到的文本保存在result属性中,第二个参数指定编码类型,可选。
readAsDataURL(file):读取文件并将文件以数据URL的形式保存在result属性中。
readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中,字符串中的每一个字符表示一个字节。
readAsArrayBuffer(file): 将一个包含文件内容的ArrayBuffer保存在result。
了解了FileReader的基本使用后,来实现下图片的本地预览功能:
- <input type="file" name="inputfile" accept="image/*" onchange="readFile(this.files[0])">
- <div id="preview"></div>
- function readFile(f){
- var reader = new FileReader();
- reader.readAsDataURL(f); //base64编码
- reader.onload = function(){
- var preview = document.querySelector('#preview');
- var img = document.createElement("img");
- img.src = reader.result;
- preview.appendChild(img);
- }
- reader.onerror = function(e){
- console.log("Error"+e);
- }
- }
页面效果看起来是这个样子的:
当选择图片后就可以本地预览啦,结合ajax实现图片上传预览功能。
效果图:
2.URL.createObjectURL()进行图片本地预览
URL.createObjectURL() 静态方法会创建一个 DOMString
,它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document
绑定。这个新的URL 对象表示着指定的 File
对象或者 Blob
对象。
构造方法
<em>objectURL </em>
=
URL.createObjectURL(blob); //参数blob:是用来创建 URL 的 File
对象或者 Blob
对象
在每次调用 createObjectURL()
方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用window.URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
HTML结构与之前一样。
- if (window.URL) {
- var preview = document.querySelector('#preview');
- var img = document.createElement("img");
- img.src = window.URL.createObjectURL(f);
- img.onload = function(){
- window.URL.revokeObjectURL(this.src); //释放内存
- }
- preview.appendChild(img);
- }
效果如上。
相关推荐
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...