网站后台页面有一个功能，管理员上传图片的时候实现预览，这个功能想到两种实现方法：
1.每次添加图片服务端处理图片，ajax传回缩略图，在页面展示。
2.前端实现预览，只有当提交表单的时候才跟服务器交互。
前端预览的好处显而易见，减少跟服务器的请求次数。百度了下，前端完全能实现这个功能，这个功能也就转化成了前端读取本机文件。考虑到网站是给内部人员用的，不用考虑浏览器兼容的问题，实现起来就简单多了。
没什么好说的，上传图片用这个标签<input type="file">，这个标签有个特性：this.files，通过这个特性就可以读取本机的文件了。this.files的详细介绍参考这个博文：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="width: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="width:50px;height:50px;margin-left: 10px;" src="‘+getObjectURL(this.files[i])+‘">‘);
47 }
48 });
49 </script>
50 </body>
51 </html>
时间： 2024-12-27 14:06:05