1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>图片上传预览</title>
7 <style>
8 .check_box{
9 position: relative;
10 width: 100px;
11 height: 100px;
12 margin: 20px;
13 display: flex;
14 flex-direction: row;
15 align-items: center;
16 }
17 #img_preview1{
18 display: block;
19 width: 100px;
20 height: auto;
21 }
22 input#zx_img1 {
23 position: absolute;
24 top: 0;
25 left: 0;
26 width: 100px;
27 height: 100px;
28 opacity: 0;
29 z-index: 9;
30 }
31
32 </style>
33 </head>
34
35 <body>
36
37 <div class="check_box">
38 <img id="img_preview1" src="./images/add.png" alt="上传图片">
39 <input type="file" name="file" id="zx_img1" style="padding: 0px;" accept="image/jpeg, image/jpg, image/png, image/gif "
40 placeholder=" 上传文件">
41 </div>
42 <p>
43 图片大小支持50kb以内,支持拓展名:jpg,png,gif
44 </p>
45
46 <!--引入jQuery插件 -->
47 <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
48 <script>
49 $("#zx_img1").change(function (e) {
50 var file = e.target.files || e.dataTransfer.files;
51 if (file) {
52
53 if (file[0] && (file[0].size / 1024).toFixed(0) > 50) {
54 console.log('你选择的文件太大，文件大小为：' + (file[0].size / 1024).toFixed(0) + "kb");
55 // return false
56 }
57 var reader = new FileReader();
58 reader.onload = function () {
59 console.log(this.result);
60 $("#img_preview1").attr("src", this.result);
61 }
62 reader.readAsDataURL(file[0]);
63 }
64 });
65 </script>
66 </body>
67
68 </html>
