html5实现本地图片预览功能

1.利用FileReader进行图片本地预览

    FileReader类型实现的是一种异步文件读取机制，用来把文件读入内存，并且读取文件中的数据。各大浏览器的支持情况：

 

 

构造方法

var reader = new FileReader()；

为了读取文件中的数据，FileReader提供了如下几个方法：

readAsText(file,encoding)：以纯文本的形式读取文件，将读取到的文本保存在result属性中，第二个参数指定编码类型，可选。

readAsDataURL(file)：读取文件并将文件以数据URL的形式保存在result属性中。

readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中，字符串中的每一个字符表示一个字节。

readAsArrayBuffer(file): 将一个包含文件内容的ArrayBuffer保存在result。

了解了FileReader的基本使用后，来实现下图片的本地预览功能：

 

Html代码  

1. <input type="file" name="inputfile" accept="image/*" onchange="readFile(this.files[0])">  
2. <div id="preview"></div>  

 

Js代码  

1. function readFile(f){  
2.     var reader = new FileReader();  
3.     reader.readAsDataURL(f); //base64编码  
4.    reader.onload = function(){  
5.          var preview = document.querySelector('#preview');  
6.          var img = document.createElement("img");  
7.          img.src = reader.result;  
8.          preview.appendChild(img);  
9.     }  
10.    reader.onerror = function(e){  
11.          console.log("Error"+e);  
12.    }  
13. }  

 

 页面效果看起来是这个样子的：

 当选择图片后就可以本地预览啦，结合ajax实现图片上传预览功能。

效果图：

 2.URL.createObjectURL()进行图片本地预览

     URL.createObjectURL() 静态方法会创建一个 DOMString，它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示着指定的 File 对象或者 Blob 对象。

构造方法

objectURL = URL.createObjectURL(blob);  //参数blob：是用来创建 URL 的 file 对象或者 Blob 对象​

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用window.URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

HTML结构与之前一样。

Js代码  

1. if (window.URL) {  
2.      var preview = document.querySelector('#preview');  
3.      var img = document.createElement("img");  
4.      img.src = window.URL.createObjectURL(f);  
5.      img.onload = function(){  
6.        window.URL.revokeObjectURL(this.src); //释放内存  
7.      }  
8.      preview.appendChild(img);  
9. }  

 效果如上。