怎么将<input type="file" accept="image/*" capture="camera">做成一个按钮
时间: 2023-12-20 11:04:38 浏览: 51
以下是将<input type="file" accept="image/*" capture="camera">做成一个按钮的方法:
```html
<label for="camera_input" class="camera_button">拍照</label>
<input type="file" accept="image/*" capture="camera" id="camera_input" style="display:none;">
```
CSS样式:
```css
.camera_button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #4CAF50;
border-radius: 5px;
cursor: pointer;
}
```
JavaScript代码:
```javascript
var camera_input = document.getElementById("camera_input");
var camera_button = document.querySelector(".camera_button");
camera_button.addEventListener("click", function() {
camera_input.click();
});
```
当用户点击“拍照”按钮时,会触发input元素的点击事件,从而打开相机应用程序。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)