1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>HTML5 调用手机摄像头</title> 7 <style type="text/css"> 8 .addBorder { 9 border: 1px solid #ccc;10 }11 #imgDiv {12 width: 300px;13 height: 300px;14 }15 16 #imgContent {17 width: 100%;18 height: 100%;19 }20 </style>21 </head>22 23 <body>24 25 <button class="btn" style="height: 200px;width: 200px;background-color: red;">按钮</button>26 <form id="imgForm">27 <input class="addBorder" accept="image/*" type="file" style="display: none;">28 <br/>29 </form>30 <button style="height: 100px;width: 100px;background-color: green;" onclick="loadImg()">获取图片</button>31 <div id="imgDiv">32 <img id="imgContent">33 </div>34 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>35 <script type="text/javascript">36 37 function loadImg() {38 //获取文件 39 var file = $("#imgForm").find("input")[0].files[0];40 41 //创建读取文件的对象 42 var reader = new FileReader();43 44 //创建文件读取相关的变量 45 var imgFile;46 47 //为文件读取成功设置事件 48 reader.onload = function(e) {49 alert(‘文件读取完成‘);50 imgFile = e.target.result;51 console.log(imgFile);52 $("#imgContent").attr(‘src‘, imgFile);53 };54 55 //正式读取文件 56 reader.readAsDataURL(file);57 }58 $(‘.btn‘).click(function() {59 $(‘.addBorder‘).click();60 })61 </script>62 </body>63 64 </html>
