jQuery实现视频转base64及上传

来源：互联网发布：第九届网络攻防大赛编辑：程序博客网时间：2024/06/06 20:35

部分HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/animation.css">
</head>
<body>
<div id="faceIdMaxBox">
    <div class="faceIdBox">
        <div class="box_12Main">
            <p class="main_p21">FaceID 身份验证</p>
            <div class="videoStartMain_d11">
                <span id="videoNum"></span>
            </div>
            <p class="main_p22 videoStart_p11">查看
                <span>录制须知</span>
            </p>
            <div class="videoStartMain_d12">

            </div>
            <div class="videoStartMain_d13">
                <a class="videoStart_a11">请牢记数字<span>(<i class="SetTimes">3</i>s后开始录制)</span></a>
                <a class="videoStart_a12">开始录制视频
                    <form method="post" enctype="multipart/form-data">
                        <input id="videoStarIn" type="file" accept="video/*" capture="camcorder">
                        <input type="hidden" name="img_upload_base" id="video_upload_base" >
                    </form>
                </a>
            </div>
            <a class="main_a22">退出验证</a>
        </div>
    </div>
</body>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/action.js"></script>
</html>

js代码

// 获取上传视频的大小
          function fileSelected() {
            var file = document.getElementById('videoStarIn').files[0];
            var fileSize=file.size;
            return fileSize
          }

$("#videoStarIn").on("change", function(){
            $(".FloatingBox").show();
            $(".PullOutFloatingMain").show();
            $(".PullOut_p11").html("正在上传识别");
            $(".PullOut_p12").html("正在上传识别");
            var videoSize = fileSelected();
            // alert(videoSize);
            if(videoSize>=20*1024*1024){
                // alert("wwww");
                // $(".FloatingBox").hide();
                $(".PullOutFloatingMain").hide();
                $(".FloatingBox").show();
                $(".pictureAndVideoFloatingMain").show();
                $(".pictureAndVideo_p11").html("视频过大");
                $(".pictureAndVideo_p12").html("请重新拍摄，上传视频不能大于20M");
            } else{
               var file = this.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);//调用自带方法进行转换
                reader.onload = function(e) {
                    // $("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览
                    // $("#videoStarIn").val(this.result);//将转换后的编码保存到input供后台使用
                    // alert(this.result);
                    var img=this.result;
                    // var imgType=img.Substring(0,i)
                    var imgNum = img.split(";base64,");
                    var imgBase=imgNum[1];
                    // alert(img);
                    // alert(imgBase);
                    $(".FloatingBox").show();
                    $(".PullOutFloatingMain").show();
                    $(".PullOut_p11").html("正在上传识别");
                    $(".PullOut_p12").html("正在上传识别");
                    // location.href = "shootFront.html";
                    $.ajax({
                        url: "dddd",
                        type: "post",
                        dataType: 'json',
                        contentType : 'application/json;charset=utf-8',
                        data: JSON.stringify({
                                "token_random_number":takenNum, //上一步返回的token
                                "video":imgBase,       //活体录像视频 base64编码
                                "videoName":"video.mp4", //带后缀名
                                "biz_no":guidCoder,//一套流程/次使用相同业务流水号
                                "return_image":"1"//返回最佳的视频抓取图片 "1":返回 ,"0":不返回
                              }),
                        success: function (data) {
                            $(".FloatingBox").hide();
                            $(".PullOutFloatingMain").hide();
                            var code=data.code;
                            if(code=="00000"){
                                // alert(data.data.token_video);

                    });
                };
            }

        });

阅读全文

0 0