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>