html5 图片转base64预览显示

最新推荐文章于 2024-01-17 11:30:23 发布

dhp30329

最新推荐文章于 2024-01-17 11:30:23 发布

阅读量285

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wujindong/p/5287138.html

版权

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>html5 图片上传预览</title>
 6     <style>
 7         #preview {
 8             width: 300px;
 9             height: 300px;
10             overflow: hidden;
11         }
12         #preview img {
13             width: 100%;
14             height: 100%;
15         }
16     </style>
17     <script src="../static/js/jquery-1.11.2.min.js"></script>
18     <script type="text/javascript">
19 
20 
21         //方法一
22         function preview1(file) {
23             var img = new Image(), url = img.src = URL.createObjectURL(file);
24             var $img = $(img);
25             img.onload = function() {
26                 URL.revokeObjectURL(url);
27                 $('#preview').empty().append($img)
28             }
29         }
30 
31         
32         //方法二
33         function preview2(file) {
34             var reader = new FileReader();
35             reader.onload = function(e) {
36                 var $img = $('<img>').attr("src", e.target.result);
37                 $('#preview').empty().append($img)
38             };
39             reader.readAsDataURL(file)
40         }
41 
42 
43         $(function() {
44             $('[type=file]').change(function(e) {
45                 var file = e.target.files[0];
46                 preview1(file);
47                 //preview2(file)
48             })
49         })
50     </script>
51 </head>
52 <body>
53 <form enctype="multipart/form-data" action="" method="post">
54     <input type="file" name="imageUpload"/>
55     <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
56 </form>
57 </body>
58 </html>

转载于:https://www.cnblogs.com/wujindong/p/5287138.html

dhp30329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 图片转base64预览显示

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>html5 图片上传预览</title> 6 <style> 7 #preview { 8 ...
复制链接

扫一扫