h5 移动端调用相机 摄像机 录音机获取文件,并下载到本地

<div onclick="addimg()"
                style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center">
                
                 <div class="geticonfont">&#xe765;</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">&#xe66f;</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">&#xe610;</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">&#xe765;</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">&#xe66f;</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">&#xe610;</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();
        }