效果
HTML：
<section class="formContainer">
<ul class="formUl">
<iframe src="" id="upload_frame" name="upload_frame" style="display: none;" ></iframe>
<li class="imgLi">
<div class="img">
<img id="idcardFrontImg" width="100%" src="images/uploadImg.png" />
<img id="idcardFrontImg_" class="wait" width="20%" src="wait.gif" />
</div>
<form id="form1" class="file_form" enctype="multipart/form-data"
action=""
method="post" target="upload_frame">
<!-- <input type="file" class="file" name="idcardFrontImgInput" id="idcardFrontImgInput" accept="image/*"> -->
<input type="file" class="file" data-type="idcardFront" name="pic" id="idcardFrontImgInput"/>
</form>
<p class="detail">法人身份证正面</p>
<div class="uploadIcon"></div>
<div id="tip1" class="right_top_tip hide"></div>
</li>
<li class="imgLi">
<div class="img">
<img id="idcardBackImg" width="100%" src="images/uploadImg.png" />
<img id="idcardBackImg_" class="wait" width="20%" src="wait.gif" />
</div>
<form id="form2" class="file_form" enctype="multipart/form-data"
action=""
method="post" target="upload_frame">
<input type="file" data-type="idcardBack" class="file" name="idcardBackImgInput" id="idcardBackImgInput" accept="image/*">
</form>
<p class="detail">法人身份证反面</p>
<div class="uploadIcon"></div>
<div id="tip2" class="right_top_tip hide"></div>
</li>
<li class="imgLi">
<div class="img">
<img id="bankcardFrontImg" width="100%" src="images/uploadImg.png" />
<!-- <img id="bankcardFrontImg_" class="wait" width="20%" src="wait.gif" /> -->
</div>
<form id="form3" class="file_form" enctype="multipart/form-data"
action=""
method="post" target="upload_frame">
<input type="file" data-type="bankcardFront" class="file" name="bankcardFrontImgInput" id="bankcardFrontImgInput" accept="image/*">
</form>
<p class="detail">银行卡正面</p>
<div class="uploadIcon"></div>
<div id="tip3" class="right_top_tip hide"></div>
</li>
<li class="imgLi">
<div class="img">
<img id="licenceImg" width="100%" src="images/uploadImg.png" />
<img id="licenceImg_" class="wait" width="20%" src="wait.gif" />
</div>
<form id="form4" class="file_form" enctype="multipart/form-data"
action=""
method="post" target="upload_frame">
<input type="file" data-type="licence" class="file" name="licenceImgInput" id="licenceImgInput" accept="image/*">
</form>
<p class="detail">营业执照</p>
<div class="uploadIcon"></div>
<div id="tip4" class="right_top_tip hide"></div>
</li>
<li class="imgLi">
<div class="img">
<img id="shopImg" width="100%" src="images/uploadImg.png" />
<img id="shopImg_" class="wait" width="20%" src="wait.gif" />
</div>
<form id="form5" class="file_form" enctype="multipart/form-data"
action=""
method="post" target="upload_frame">
<input type="file" data-type="shop" class="file" name="shopImgInput" id="shopImgInput" accept="image/*">
</form>
<p class="detail">店内照</p>
<div class="uploadIcon"></div>
<div id="tip5" class="right_top_tip hide"></div>
</li>
<li class="imgLi">
<div class="img">
<img id="shopHeadImg" width="100%" src="images/uploadImg.png" />
<img id="shopHeadImg_" class="wait" width="20%" src="wait.gif" />
</div>
<form id="form6" class="file_form" enctype="multipart/form-data"
action=""
method="post" target="upload_frame">
<input type="file" data-type="shopHead" class="file" name="shopHeadImgInput" id="shopHeadImgInput" accept="image/*">
</form>
<p class="detail">门头照</p>
<div class="uploadIcon"></div>
<div id="tip6" class="right_top_tip hide"></div>
</li>
<li class="imgLi">
<div class="img">
<img id="cashierImg" width="100%" src="images/uploadImg.png" />
<img id="cashierImg_" class="wait" width="20%" src="wait.gif" />
</div>
<form id="form7" class="file_form" enctype="multipart/form-data"
action=""
method="post" target="upload_frame">
<input type="file" data-type="cashier" class="file" name="cashierImgInput" id="cashierImgInput" accept="image/*">
</form>
<p class="detail">收银台</p>
<div class="uploadIcon"></div>
<div id="tip7" class="right_top_tip hide"></div>
</li>
</ul>
<input type="hidden" name="idcardFront" id="idcardFront">
<input type="hidden" name="idcardBack" id="idcardBack">
<input type="hidden" name="bankcardFront" id="bankcardFront">
<input type="hidden" name="licence" id="licence">
<input type="hidden" name="shop" id="shop">
<input type="hidden" name="shopHead" id="shopHead">
<input type="hidden" name="cashier" id="cashier">
<canvas id="canvas" style="display: none;"></canvas>
</section>
css：
#basicInfoPic{
.formContainer{
padding: pxTorems(0) pxTorems(30) pxTorems(30);
.formUl{
.imgLi:nth-child(odd){
margin-left: 7%;
}
.imgLi{
// flex:2;
float: left;
width: 45%;
position: relative;
.img{
img:first-child{
width: 100%;
height: pxTorems(200)
}
img{
}
.wait{
display: none;
width: pxTorems(34);
height: pxTorems(35);
position: absolute;
left: 46%;
top: 29%;
}
}
.file_form{
width: pxTorems(50);
height: pxTorems(50);
border-radius: pxTorems(50);
position: absolute;
bottom: 28%;
right: -8%;
z-index: 10;
input{
// width: 100%;
// height: 100%;
// z-index: 11;
width: pxTorems(50);
height: pxTorems(50);
border-radius: pxTorems(50);
position: absolute;
bottom: 28%;
right: -8%;
z-index: 10;
display: block!important;
opacity:0;
-ms-filter:alpha(opacity=0);
filter:alpha(opacity=0);
}
}
.detail{
text-align: center;
padding: pxTorems(30) pxTorems(0);
}
.uploadIcon{
width: pxTorems(50);
height: pxTorems(50);
background: url(../images/addPicture.png) no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 28%;
right: -8%;
z-index: 8;
}
}
}
}
js:
$(function(){
// $(".idcardFrontImgInputInput").on("change",uploadidcardFront);
$(".saveBtn").on("click",submit);
init();
$(".img").on("click",function(){
$(this).siblings('.file_form').find("input").trigger('click');
})
})
function init(){
loading();
var opts = {
url: "/oa/merchant/pic/base",
data: {
merchantId: merchantId,
sessionId: sessionId
},
succ: function(res){
closeLoading();
if(res.code==200){
var idcardFront = res.data.idcardFront;
var idcardBack = res.data.idcardBack;
var bankcardFront = res.data.bankcardFront;
var businessLicense = res.data.businessLicense;
var businessInside = res.data.businessInside;
var doorPhoto = res.data.doorPhoto;
var cashierDesk = res.data.cashierDesk;
// debugger
if(idcardFront!=null){
$("#idcardFrontImg").attr("src",idcardFront);
}
if(idcardBack!=null){
$("#idcardBackImg").attr("src",idcardBack);
}
if(bankcardFront!=null){
$("#bankcardFrontImg").attr("src",bankcardFront);
}
if(businessLicense!=null){
$("#licenceImg").attr("src",businessLicense);
}
if(businessInside!=null){
$("#shopImg").attr("src",businessInside);
}
if(doorPhoto!=null){
$("#shopHeadImg").attr("src",doorPhoto);
}
if(cashierDesk!=null){
$("#cashierImg").attr("src",cashierDesk);
}
}else if(res.code==503){
$(".toast").text("请重新登录！");
setTimeout(showToast,350);
window.location.href="rate.html";
}
},
error: function(res){
$(".toast").text(res.msg);
setTimeout(showToast,350);
}
}
window.sendAJAX(opts);
}
$(".file").on('change',function(){
var type = $(this).data('type');
var this_ = this;
var defaultSrc = "images/uploadImg.png";
if(type == 'idcardBack'){
if($("#idcardFrontImg").attr("src")==defaultSrc){
$(".toast").text$(".toast").text('请上传法人身份证正面！');
setTimeout(showToast,350);
return false;
}
}else if(type == 'bankcardFront'){
if($("#idcardBackImg").attr("src")==defaultSrc){
$(".toast").text('请上传法人身份证反面！');
setTimeout(showToast,350);
return false;
}
}else if(type == 'licence'){
if($("#bankcardFrontImg").attr("src")==defaultSrc){
$(".toast").text('请上传银行卡正面！');
setTimeout(showToast,350);
return false;
}
}else if(type == 'shop'){
if($("#bankcardFrontImg").attr("src")==defaultSrc){
$(".toast").text('请上传营业执照！');
setTimeout(showToast,350);
return false;
}
}else if(type == 'shopHead'){
if($("#licenceImg").attr("src")==defaultSrc){
$(".toast").text('请上传店内照！');
setTimeout(showToast,350);
return false;
}
}
else if(type == 'cashier'){
if($("#shopHeadeImg").attr("src")==defaultSrc){
$(".toast").text('请上传门头照！');
setTimeout(showToast,350);
return false;
}
}
setPrevie(this_,type);
})
function setPrevie(this_,type){
if(this_.files&&this_.files[0]){
var file = this_.files[0];
}else{
return;
}
if(file.type && !/image/i.test(file.type)){
$(".toast").text("仅支持图片格式文件");
setTimeout(showToast,350);
return false;
}
// var imgType = file.type.split('/')[1];
// if( imgType != 'jpg' && imgType !='jpeg'){
// showToast("请上传jpg格式图片");
// return false;
// }
if(file.size<1024*1024*10){
$(this_).siblings(".right_top_tip").addClass('hide');
$('#'+type+"Img_").show();
var reader = new FileReader();
reader.onload = function (e) {
$('#'+type+'Img').attr('src', e.target.result);
}
// submitPic(type)
reader.readAsDataURL(this_.files[0]);
var objUrl = getObjectURL(this_.files[0]);
renderss(objUrl,type,0.8);
}else{
showToast("图片大小不能超过10M");
return false;
}
}
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
function renderss(src,type,rate){
var image=new Image();
image.src=src;
var imageWidth ,imageHeight;
image.onload=function(){
var imgw=image.width;
var imgh=image.height;
var canvas=document.getElementById('canvas');
if(imgw<1366&&imgh<768){
imageWidth = image.width;
imageHeight = image.height;
}else {
if(imgw/imgh>=(1366/768)){
imageWidth=1366;
imageHeight= (imgw/imgh)*1366;
}else{
imageHeight=768;
imageWidth= (imgw/imgh)*768;
}
}
canvas.width=imageWidth;
canvas.height=imageHeight;
var con=canvas.getContext('2d');
con.clearRect(0,0,canvas.width,canvas.height);
con.drawImage(image,0,0,imageWidth,imageHeight);
var base64 = canvas.toDataURL('image/jpeg',rate);
var base= base64;
var baseLen = base.length;
var fileLength=parseInt(baseLen-(baseLen/8)*2);
var reader = new FileReader();
var dataURL = dataURLtoBlob(base64);
if(dataURL.size/1024>300){
renderss(getObjectURL(dataURL),type,rate-0.2)
}
submitPic(type,base)
}
};
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
function submitPic(type,data){
if(type == 'idcardFront'){
picType = "idcardFront";
}else if(type == 'idcardBack'){
picType = "idcardBack";
}else if(type == 'bankcardFront'){
picType = "bankcardFront";
}
else if(type == 'licence'){
picType = "businessLicense";
}
else if(type == 'shop'){
picType = "businessInside";
}
else if(type == 'shopHead'){
picType = "doorPhoto";
}else if(type == 'cashier'){
picType = "cashierDesk";
}
$.ajax({
type: "post",
url: window.domain + '/oa/merchant/submitPic',
data:{
merchantId: merchantId,
sessionId: sessionId,
picType : picType,
pic: data
},
dataType: 'json',
success:function(res){
if(res.code == 200){
$(".toast").text("图片上传成功！");
setTimeout(showToast,350);
}else{
$(".toast").text(res.errorMessage);
setTimeout(showToast,350);
return false;
}
},
error:function(){
$(".toast").text('网络异常，请稍后重试');
setTimeout(showToast,350);
return false;
},
complete: function(){
$('#'+type+"Img_").hide();
}
})
}
function submit(){
var defaultSrc = "images/uploadImg.png";
if($("#idcardFrontImg").attr("src")==defaultSrc){
$(".toast").text('请上传法人身份证正面！');
setTimeout(showToast,350);
return false;
}
if($("#idcardBackImg").attr("src")==defaultSrc){
$(".toast").text('请上传法人身份证反面！');
setTimeout(showToast,350);
return false;
}
if($("#bankcardFrontImg").attr("src")==defaultSrc){
$(".toast").text('请银行卡正面！');
setTimeout(showToast,350);
return false;
}
if($("#licenceImg").attr("src")==defaultSrc){
$(".toast").text('请上传营业执照！');
setTimeout(showToast,350);
return false;
}
if($("#shopImg").attr("src")==defaultSrc){
$(".toast").text('请上传店内照！');
setTimeout(showToast,350);
return false;
}
if($("#shopHeadImg").attr("src")==defaultSrc){
$(".toast").text('请上传个人门头照！');
setTimeout(showToast,350);
return false;
}
if($("#cashierImg").attr("src")==defaultSrc){
$(".toast").text('请上传收银台！');
setTimeout(showToast,350);
return false;
}
window.location.href = "pictureInfo.html"+window.getAllParam();
}