html5 图片上传预览
前段时间做html5项目的时候，做了一个图片上传功能，并且可以直接预览，单纯的js就可以实现，很方便的。今天拿出来分享一下。
这样做比调用后台方便多了，但是只支持html5的，html5以前是不支持的。未来html5是主流，所以这种方法非常方便的。
几段js代码就可以来实现，而且解析速度也很快。这种方法值得推广，以后前端也不要为这个烦恼了，还要后台用程序加载出来，那样太浪费时间了。
代码如下：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>html5 图片上传预览</title>
6 <script src="jquery-1.7.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(function(){
9 $("input[type='file']").change(function(evt){
10 var files = evt.target.files;
11
12 for (var i = 0, f; f = files[i]; i++) {
13
14 if (!f.type.match('image.*')) {
15 continue;
16 }
17
18 var reader = new FileReader();
19
20 reader.onload = (function(theFile) {
21 return function(e) {
22 $("#list img").attr("src",e.target.result); //预览图片的位置
23 };
24 })(f);
25
26 reader.readAsDataURL(f);
27 }
28 });
29 })
30
31 </script>
32 </head>
33 <body>
34 <form enctype="multipart/form-data" action="" method="post">
35 <input type="file" name="imageUpload" />
36 <div id="list"><img src=""></div>
37 </form>
38 </body>
39 </html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>html5 图片上传预览</title>
6 <script src="jquery-1.7.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(function(){
9 $("input[type='file']").change(function(evt){
10 var files = evt.target.files;
11
12 for (var i = 0, f; f = files[i]; i++) {
13
14 if (!f.type.match('image.*')) {
15 continue;
16 }
17
18 var reader = new FileReader();
19
20 reader.onload = (function(theFile) {
21 return function(e) {
22 $("#list img").attr("src",e.target.result); //预览图片的位置
23 };
24 })(f);
25
26 reader.readAsDataURL(f);
27 }
28 });
29 })
30
31 </script>
32 </head>
33 <body>
34 <form enctype="multipart/form-data" action="" method="post">
35 <input type="file" name="imageUpload" />
36 <div id="list"><img src=""></div>
37 </form>
38 </body>
39 </html>
