HTML5调用手机摄像机、相册功能 <input>方法

 新葡亰编程     |      2020-01-16
  • 好看的上传框其实挺好弄的-样式
  • 好看的上传框其实挺好弄的-显示选中的图片

最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能!


在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了解过,现在整理一下:

给上传文件框增加一个事件:onThumbnailChanged(event, this)。

不需要特殊环境,使用input标签 type值为file,可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码:

重点是这个 onThumbnailChanged 方法:

accept表示打开的系统文件目录

function onThumbnailChanged(e, target) { var reader = new FileReader(); reader.onload = (function (file) { return function (e) { $(target).parent().find(".uploadPreview").get(0).src = this.result; // 这个是 Base64 的数据了 }; })(e.target.files[0]); reader.readAsDataURL(e.target.files[0]); }

capture表示的是系统所捕获的默认设备,camera:照相机;camcorder:摄像机;microphone:录音;

 

其中还有一个属性multiple,支持多选,当支持多选时,multiple优先级高于capture,所以只用写成:就可以,可以在手机上测试一下。那么选中的图片怎样获取并显示呢?

  • 好看的上传框其实挺好弄的-样式
  • 好看的上传框其实挺好弄的-显示选中的图片

html:(css)


图片 1

js:

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();