您的位置：首页 > Web前端 > JQuery
jQuery实现视频转base64及上传

2017-12-15 15:33 330 查看
部分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];

4000
// 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);

});
};
}

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航