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,gif44 ????</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 false56 ????????????????}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>H5 实现图片上传预览
原文地址：https://www.cnblogs.com/zhenguo-chen/p/10454535.html