需求:h5实现只能通过拉起相机拍照获取图片,不可以通过相册选择图片
方案:使用input的capture属性实现
<input type="file" capture="camera" accept="image/*">
微信浏览器(其他浏览器暂未发现问题)个别品牌手机(小米)会拉起相册,去掉accept属性即可
<input type="file" capture="camera">
type="file"时capture和accept属性使用说明:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file
需求:h5实现只能通过拉起相机拍照获取图片,不可以通过相册选择图片方案:使用input的capture属性实现<input type="file" capture="camera" accept="image/*">微信浏览器(其他浏览器暂未发现问题)个别品牌手机(小米)会拉起相册,去掉accept属性即可<input type="file" capture="camera">type="file"时capture和accept属性使用说明:https://develo
用H5做一个移动端的网页时,需要上传图片,于是需要调用手机相册和相机功能。
具体实现
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
三个属性:
accept - 规定可提交的文件类型。
capture - 系统所捕获的默认设备。camera(照相机),camcorder(摄像机...
<input> type 类型为 file 的标签,可以选择一个或多个文件,通过表单上传到服务器,也可以通过 Javascript 的 File API 对文件进行操作。
<input name="myFile" type="file">
常用参数:
Value:DOMString 选择文件的路径。DOMString 是UTF-16字符串。由于JavaScript已经使用了这样的字符串,所以DOMString 直接映射到 String。
事件:change 事件 input
//只调取照相
accept是控制image类型
<input type="file" id='image' accept="image/*" capture='camera' name="file">
<input type="file" name="file" style="margin-top:20px;">
就能调用到手机端的相机了,但是这个inpu...
1.创建页面简单布局demo.xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id
html部分
<input type="file" id="file1" accept="image/*" capture="camera" @change="changePic" />
<!-- accept="video/*" 可调用摄像头拍摄视频 -->
changePic(e) {
// console.log(e)
const _this = this;
const fileObj = e.target;
const file
移动端H5web 用input type = file 在部分安卓手机上无法调起摄像头拍照,有的也无法访问相册而是直接访问了文档,解决办法是:
加上 accept = "image/*" 防止打开是的文档,加上mutiple="mutiple" 可以再打开的时候选择是打开相册还是使用摄像头,一般加这两个属性即可,需要调用摄像头的加上capture="camera"以兼容不同的安卓手机
同时,你也可以在WebView中设置WebChromeClient的回调函数,通过`onShowFileChooser`方法来控制文件选择器的行为。在该方法中,你可以根据自己的需要返回一个空的Intent,这样就可以阻止选择器调用摄像头了。以下是示例代码:
```java
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
// 返回空的Intent,阻止选择器调用摄像头
filePathCallback.onReceiveValue(null);
return true;
需要注意的是,这种方法只能阻止文件选择器调用摄像头,如果页面中有其他组件(如JavaScript代码)调用了摄像头,仍然需要进行其他处理。