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>