h5 移动端调用相机 摄像机 录音机获取文件,并下载到本地
作者：互联网
<div onclick="addimg()"
style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center">
<div class="geticonfont"></div>
<div class="titlename">拍照</div>
</div>
<div onclick="addvideo()"
style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center">
<div class="geticonfont"></div>
<div class="titlename">录像</div>
</div>
<div onclick="addaudio()"
style="position: relative;width:26%;height:100%;top:25%;text-align: center;line-height:center">
<div class="geticonfont"></div>
<div class="titlename">录音</div>
</div>
上面为div的效果图,相机,摄像机,录音机图标为阿里小图标,使用需自己下载
function addimg() {
document.getElementById("imagesel").click();
$(".show-add").hide();
console.log("调用相机");
}
function addvideo() {
document.getElementById("videosel").click();
$(".show-add").hide();
console.log("调用摄像机");
}
function addaudio() {
document.getElementById("audiosel").click();
$(".show-add").hide();
console.log("调用录音");
}
点击对应的图标,调用对应的函数,在函数内直接调用点击方法,调用对应的设备
<input type="file" id="imagesel" accept="image/*" capture="camera"
onchange="upload(this)" style="display:none">
<input type="file" id="videosel" accept="video/*" capture="camcorder"
onchange="upload(this)" style="display:none">
<input type="file" id="audiosel" accept="audio/*"
capture="microphone" onchange="upload(this)" style="display:none">
三个属性：
accept - 规定可提交的文件类型。
capture - 系统所捕获的默认设备。camera(照相机)，camcorder(摄像机)，microphone(录音)
mutiple - 支持多选。当支持多选时，multiple优先级高于capture(安卓系统多选无效)
几种写法:
1.<input type="file" accept="image/*" capture="camera"> <!-- 调用相机 -->
2.<input type="file" accept="video/*" capture="camcorder"> <!-- 调用摄像机 -->
3.<input type="file" accept="audio/*" capture="microphone"> <!-- 调用录音机 -->
4.<!-- 不加上capture，则只会显示相应的，例如下三种依次是：拍照或图库，录像或图库，录像或拍照或图库， -->
<input type="file" accept="image/*" >
<input type="file" accept="video/*" >
<input type="file" accept="audio/*" >
onchange:当内容改变时调用
//获取文件
function upload(file) {
console.log("获取图片");
var filename = file.files[0].name;
console.log("文件名称:" + filename);
this.saveBlobAsFile(file.files[0], filename);
}
//文件下载
function saveBlobAsFile(blob, fileName) {
console.log("fileName:" + fileName);
var reader = new FileReader();
reader.onload = function() {
var base64 = reader.result;//文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
var a = document.createElement("a");
a.setAttribute("href", base64);
a.setAttribute("download", fileName);
a.setAttribute("id", "aid");
$("body").append(a); // 修复firefox中无法触发click
document.getElementById("aid").click();
$(a).remove();
}
reader.readAsDataURL(blob);//以data: URL的形式读取
}
文件下载:照片 视频会下载到相册 录音会保存在本地录音存放的地方
完整代码:
<input type="file" id="imagesel" accept="image/*" capture="camera"
onchange="upload(this)" style="display:none">
<input type="file" id="videosel" accept="video/*" capture="camcorder"
onchange="upload(this)" style="display:none">
<input type="file" id="audiosel" accept="audio/*"
capture="microphone" onchange="upload(this)" style="display:none">
<div onclick="addimg()"
style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center">
<div class="geticonfont"></div>
<div class="titlename">拍照</div>
</div>
<div onclick="addvideo()"
style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center">
<div class="geticonfont"></div>
<div class="titlename">录像</div>
</div>
<div onclick="addaudio()"
style="position: relative;width:26%;height:100%;top:25%;text-align: center;line-height:center">
<div class="geticonfont"></div>
<div class="titlename">录音</div>
</div>
function addimg() {
document.getElementById("imagesel").click();
console.log("调用相机");
}
function addvideo() {
document.getElementById("videosel").click();
console.log("调用摄像机");
}
function addaudio() {
document.getElementById("audiosel").click();
console.log("调用录音");
}
//文件下载
function saveBlobAsFile(blob, fileName) {
console.log("fileName:" + fileName);
var reader = new FileReader();
reader.onload = function() {
var base64 = reader.result;//文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
var a = document.createElement("a");
a.setAttribute("href", base64);
a.setAttribute("download", fileName);
a.setAttribute("id", "aid");
$("body").append(a); // 修复firefox中无法触发click
console.log("123:");
//document.getElementById("aid").click();
// alert("123:");
//a.click();
document.getElementById("aid").click();
$(a).remove();
// alert("123:");
}
reader.readAsDataURL(blob);//以data: URL的形式读取
}
//获取图片
function upload(file) {
$(".show-add").hide();
console.log("获取图片");
var filename = file.files[0].name;
console.log("文件名称:" + filename);
this.saveBlobAsFile(file.files[0], filename);
//$(".show-add").show();
}
标签：function,document,console,log,录音机,摄像机,getElementById,h5,click 来源： https://www.cnblogs.com/ttqi/p/14034229.html