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

2017-12-15 15:27 701 查看
部分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="shootFrontMain_d11">
<a class="shootFront_a11">
<img id="img_upload_show" />
<input type="file" accept="image/*" name="file" id="img_upload_file1" capture="camera" multiple="multiple" value="" />
<input type="hidden" name="img_upload_base" id="img_upload_base" />
<label for="img_upload_file1">点击拍摄身份证人像面</label>
</a>
</div>
<p class="main_p22">查看
<span>拍摄须知</span>
</p>
<div class="shootFrontMain_d12">
<div class="shootFront_IN11">
<span class="shootFront_Sp11">姓名</span>
<input class="shootFront_InB11 identifyName" type="text" name="" maxlength="" disabled="disabled">
</div>
<div class="shootFront_IN12">
<span class="shootFront_Sp11">身份证</span>
<input class="shootFront_InB11 identifyID" type="text" name="" maxlength="18" disabled="disabled">
</div>
</div>
<a class="main_a21 shootFront_a12"><span>下一步</span>拍摄身份证国徽面</a>
<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(){
$("#img_upload_file1").change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);//调用自带方法进行转换
reader.onload = function(e) {
$("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览
$("#img_upload_base").val(this.result);//将转换后的编码保存到input供后台使用
// alert(this.result);
var img=$("#img_upload_base").val();
// 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: "ddddd",

4000
type: "post",
dataType: 'json',
contentType : 'application/json;charset=utf-8',
data: JSON.stringify({
"application":"jtyh", //应用类型
"image":imgBase,       //身份证图片base64编码字符串
"imageName":"cdf.jpg", //图片名称  比如用户ID
"legality":"1"//身份证合法性性校验标志 "1":校验 "0":不校验
}),
success: function (data) {
// alert(data);
$(".FloatingBox").hide();
$(".PullOutFloatingMain").hide();
// location.href = "shootFront.html";
// location.href="shootFront.html?imgBase="+imgBase;//发送txt里面的内容
// alert(data.data.name);
var idName=data.data.name;
var idenID=data.data.id_card_number;
// alert(data.data.side);
// alert(idenID);
if(idName==undefined||idName==""){
// alert('fail');
$(".FloatingBox").show();
$(".pictureAndVideoFloatingMain").show();
$(".pictureAndVideo_p11").html("拍摄面不符");
$(".pictureAndVideo_p12").html("请拍摄身份证人像面");

}else{
$(".identifyName").val(idName);
$(".identifyID").val(idenID);
setCookie("idName",idName,1);
setCookie("idenID",idenID,1);
// alert(data.code);
// alert(data.msg);
// alert(data.data.name);
// alert(data.data.id_card_number);
$('.shootFront_a12').attr('href','shootReverse.html');
}
}
});
};
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航