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>
时间： 2024-11-02 20:24:18