input上传图片提示从本地相册选择或者拍照上传

input h5 html5 上传 微信 手机 微信 本地相册 摄像头 本地 拍照 相机

有时候上传文件对于pc端直接点击要上传文件即可，但是对于移动端用户有时候要给提示是从本地相册中上传图片或者是调取本地摄像头拍照上传。

这里是用input的就可以实现了。

普通上传：

<input type="file" name="file">

调取摄像头上传：

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

同时支持相册上传和唤起拍照

<input type=”file” name=”file” accept=”image/*” class=”el-upload__input”>

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

capture表示，可以捕获到系统默认的设备，比如：
camera--照相机；
camcorder--摄像机；
microphone--录音。
accept表示，直接打开系统文件目录。

本人测试过确实可行。

demo

(注意：使用三星手机自带浏览器浏览就会有弹窗提示，苹果也自带提示功能无需考虑使用。)