HTML5+JS實現簡單的圖片上傳預覽

時間 2019-11-13

原文原文鏈接

直接上代碼javascript

↓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   <!-- 示例原來用的是本地的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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。