前端图片预览

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

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

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

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

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

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

效果：

下面是代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9     <form action="http://www.baidu.com" method="get">
10          <div class="control-group">
11                        <label class="control-label">缩略图</label>
12                        <div class="controls">
13                            <span id="imgContent">
14                               
15                           </span>
16                           <img style="50px;height:50px;margin-left: 10px;" src="img/i_addphoto.png" onclick="$('#img').click()">
17                         <div style="opacity: 0;height: 0px;">
18                             <input type="file" name="img" id="img" data-content="imgContent" multiple/>
19                         </div>
20                        </div>
21           </div>
22           <br/>
23                 <input type="submit"/>
24     </form>
25 <!--引用百度的juery库-->
26 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
27 <script>
28 //工具函数，可以作为尾部文件引用进来。
29     function getObjectURL(file) {
30         var url = null ; 
31         if (window.createObjectURL!=undefined) { // basic
32             url = window.createObjectURL(file) ;
33         } else if (window.URL!=undefined) { // mozilla(firefox)
34             url = window.URL.createObjectURL(file) ;
35         } else if (window.webkitURL!=undefined) { // webkit or chrome
36             url = window.webkitURL.createObjectURL(file) ;
37         }
38         return url ;
39     }
40 </script>
41 <script>
42 //从本地添加了文件后，触发onchange事件。
43     $("input[type='file']").change(function(e) {
44             $("#"+$(this).attr("data-content")).html('');
45             for (var i = 0; i < this.files.length; i++) {
46                 $("#"+$(this).attr("data-content")).append('<img style="50px;height:50px;margin-left: 10px;" src="'+getObjectURL(this.files[i])+'">');
47             }
48         });
49 </script>
50 </body>
51 </html>