网站后台页面有一个功能，管理员上传图片的时候实现预览，这个功能想到两种实现方法：

1.每次添加图片服务端处理图片，ajax传回缩略图，在页面展示。

2.前端实现预览，只有当提交表单的时候才跟服务器交互。

前端预览的好处显而易见，减少跟服务器的请求次数。百度了下，前端完全能实现这个功能，这个功能也就转化成了前端读取本机文件。考虑到网站是给内部人员用的，不用考虑浏览器兼容的问题，实现起来就简单多了。

没什么好说的，上传图片用这个标签<input type="file">，这个元素的属性files（是个FileList对象），通过这个特性就可以读取本机的文件了。files的详细介绍可以阅读《javaScript权威指南》，或者参考这个博文：。

每次选择文件后，立即显示选择图片预览，就要用到input的onchang事件。本文不用file的操作方式，而是用URL.createObjectURL(),该方法会根据传入的参数创建一个指向该参数对象的URL.

效果：

 

下面是代码：

1  2  3  4 
      5  6  7  8  9     
     
      10          
      
       11                        
       缩略图12                        
       
        13                            
        14                               15                           16                           
        17                         
        
         18                             
         19                         
        
20                        
       
21           
      
22           
      
23                 
      24     
     
25 
     26 27 41 50 51