H5 移动端相册拍照 录音 录像,然后上传后台

        
                <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="add_img()"
                style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center">

                <div class="geticonfont">&#xe765;</div>
                <div class="titlename1">拍照</div>

            </div>
            <div onclick="add_video()"
                style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center">

                <div class="geticonfont">&#xe66f;</div>
                <div class="titlename1">录像</div>

            </div>
            <div onclick="add_audio()"
                style="position: relative;width:26%;height:100%;top:25%;text-align: center;line-height:center">

                <div class="geticonfont">&#xe610;</div>
                <div class="titlename1">录音</div>

            </div>

阿里小图标引用需自行下载

    function add_img() {
            document.getElementById("imagesel").click();
        
            console.log("调用相机");
        }
        function add_video() {
            document.getElementById("videosel").click();
        
            console.log("调用摄像机");
        }
        function add_audio() {
            document.getElementById("audiosel").click();
            
            console.log("调用录音");
        }

文件上传:

    //图片上传
        function upload(file) {
          
            var formData = new FormData();
            formData.append("file", file.files[0]);

            var u = window.localStorage.getItem("pocurl")
                    + "/materials/pocEvent/upload";
            console.log("U:" + u);
            //  alert(formData);
            // alert(file);

            $
                    .ajax({
                        url : u,
                        type : 'POST',
                        data : formData,
                        processData : false,// 告诉jQuery不要去处理发送的数据
                        contentType : false,// 告诉jQuery不要去设置Content-Type请求头
                        beforeSend : function() {

                        },
                        complete : function() {

                        },
                        success : function(res) {
                            
                          
                        }
                    });

        

        }

 

该文章个别参数没有详细说明,如果不清楚请参考上篇博客,上篇博客参数介绍十分详细:https://www.cnblogs.com/ttqi/p/14034229.html