原文：http://blog.csdn.net/varkychan/article/details/8223979

在网页中实现图片上传功能，当用户选择了图片文件后，想在页面中即时预览该图片，这个简单的需求在很久很久以前可以实现，后来因为安全性的问题被禁止直接访问本地文件了，所以又在很长很长一段时间里，想通过HTML直接预览用户选择的图片变得不可能，自从有了HTML5，这个功能又回来了，通过FileReader可以轻松的实现这个功能。

只要在<input type="file" />文件表单元素中监听 onchange 事件，然后通过FileReader读取图片文件，然后将读取的内容在<img>中显示即可。示例代码如下：

 

[javascript] view plain copy
 
  1. document.getElementById('file').onchange = function(evt) {  
  2.   
  3.     // 如果浏览器不支持FileReader，则不处理  
  4.   
  5.     if (!window.FileReader) return;  
  6.   
  7.     var files = evt.target.files;  
  8.   
  9.     for (var i = 0, f; f = files[i]; i++) {  
  10.   
  11.         if (!f.type.match('image.*')) {  
  12.   
  13.             continue;  
  14.   
  15.         }  
  16.   
  17.   
  18.         var reader = new FileReader();  
  19.   
  20.         reader.onload = (function(theFile) {  
  21.   
  22.             return function(e) {  
  23.   
  24.                 // img 元素  
  25.   
  26.                 document.getElementById('previewImage').src = e.target.result;  
  27.   
  28.             };  
  29.   
  30.         })(f);  
  31.   
  32.   
  33.         reader.readAsDataURL(f);  
  34.   
  35.     }  
  36.   
  37. }