直接上代码
↓
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>