HTML5+JS实现简单的图片上传预览

直接上代码

 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   <!-- 示例原来用的是本地的jQuery,下面改成引用在线的 -->
18   <!-- <script src="jquery-1.7.2.min.js"></script> -->
19   <!-- jQuery 所有版本在线引用 - 肖朋伟 - CSDN博客 -->
20   <!-- https://blog.csdn.net/qq_40147863/article/details/83116859 -->
21   <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
22   <script type="text/javascript">
23     // JS+HTML5实现上传图片预览效果完整实例【测试可用】_javascript技巧_脚本之家
24     // https://www.jb51.net/article/111651.htm
25     // URL.createObjectURL和URL.revokeObjectURL - 诗&远方 - 博客园
26     // https://www.cnblogs.com/liulangmao/p/4262565.html
27     function preview1(file) {// 不支持低版本浏览器
28       var img = new Image(), url = img.src = URL.createObjectURL(file);
29       var $img = $(img)
30       img.onload = function() {
31         URL.revokeObjectURL(url);
32         $(#preview).empty().append($img);
33       }
34     }
35     function preview2(file) {
36       var reader = new FileReader();
37       reader.onload = function(e) {
38         var $img = $(<img>).attr("src", e.target.result);
39         $(#preview).empty().append($img);
40       }
41       reader.readAsDataURL(file);
42     }
43      
44     $(function() {
45       $([type=file]).change(function(e) {
46         var file = e.target.files[0];
47         // preview1(file);// 方法1 不支持低版本浏览器
48         preview2(file);// 方法2
49       })
50     })
51   </script>
52 </head>
53 <body>
54 <form enctype="multipart/form-data" action="" method="post">
55   <input type="file" name="imageUpload"/>
56   <div id="preview" style="border:1px solid gray;"></div>
57 </form>
58 </body>
59 </html>
相关文章
相关标签/搜索