移动端裁切上传图片 

css部分：

#clipArea {
height: 64.5rem;
}
#file,
#clipBtn {
margin: 0.833rem;
}
#view {
margin: 0 auto;
width: 8.333rem;
height: 8.333rem;
}


上传部分：      

                <div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:15rem;text-align:center; border:#e1e1e1 1px  dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;overflow: hidden;">
                    <if condition="$vehicleInfo[0]['VehicleLicence'] eq ''"> 
                        <div style="width:100%;height:15rem;color:#999"> 
                            <span style="font-size:6rem;font-weight:100; margin-top:2rem; display:inline-block">+</span><br />
                            <span style="font-size:1.6rem; font-weight:bold;">车辆行驶证</span> 
                        </div>
                    <else />
                        <img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span> 
                    </if>
                </div>
                <input class="file" type="file" name="vehicleList" id="vehicleListFiel" style="display:none" value=""/>
裁切部分：

<article class="htmleaf-container" id="uploadPage" style="display: none">
<div id="clipArea"></div>
<div>
<button id="refile" style="position: fixed;bottom:4rem;left:20%;border:none;background-color: transparent;font-size: 2rem;color:#ffffff;">取消</button>
<button id="clipBtn" style="margin:0;position: fixed;bottom:4rem;right:20%;border:none;background-color: transparent;font-size: 2rem;color:#ffffff;">截取</button>
</div>

<div id="view" style="display: none;"></div>
</article>

 

js部分：

// 因为有好几个上传在一个界面里面所以判断点击第几个，若只有一个上传就不用判断
window.onload = function(){
var imgs = getElementByClassName("file");
num=0;
for(var i=0;i<imgs.length;i++){
imgs[i].parentNode.onclick = (function(i){
return function(){
if(!i==0){
num=i;
console.log(num);
}
}
})(i)
}
}
function getElementByClassName(className){
var elems = [];
if(!document.getElementsByClassName){
alert("no exit");
var dom = document.getElementByTagName('*');
for(var i = 0;i<dom.length;i++){
if(dom[i].className == className)
elems.push(dom[i]);
}
}else{
elems = document.getElementsByClassName(className);
}
return elems;
}
// 上传图片
$("#clipArea").photoClip({
width: 200,
height: 200,
file: ".file",
view: "#view",
ok: "#clipBtn",
loadStart: function() {
$('#uploadPage').show();
$('.car_manage').hide();
$('.getDriverInfoButton').hide();
console.log("照片读取中");
//获取照片方向角属性，用户旋转控制
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
$('#uploadPage').hide();
$('.car_manage').show();
$('.getDriverInfoButton').show();
console.log(dataURL);
aa(dataURL);
function aa(res) {
$.ajax({
type:"post",
url:"{:U('Vehicle/index/uploadvehicle')}",
//url:"{:U('Vehicle/index/uploadVehiclePic')}",
data:{base64:res,num:num},
dataType:'json',
async:true,
success:function(ee){
if(ee.status==1){
$(".vehicleListFielImgBox").eq(num).empty();
$(".vehicleListFielImgBox").eq(num).append('<img id="imgrote" style="width:100%;height:100%;" src="'+ee.info[0]+'"/>');
$(".vehicleListFielImgBox").eq(num).parent().parent().find(".close").show();
$(".vehicleListFielImgBox").eq(num).parent().parent().find('.DrivingLicensePrice').val(ee.info[0]);
if(num>=1){
$("#vehiclepic"+num).val(ee.info[1]);
}
num=0;
}else{
alert(ee.info);
}
},
error:function(ee){
alert(ee.info);
}
});
}
}

});
$('#refile').on('click',function(){
$('#uploadPage').hide();
$('.car_manage').show();
$('.getDriverInfoButton').show();
})

所用js:

<script src="__ROOT__/Public/js/iscroll-zoom.js"></script>
<script src="__ROOT__/Public/js/hammer.js"></script>
<script src="__ROOT__/Public/js/jquery.photoClip.js"></script>
<script src="__ROOT__/Public/js/exif.js"></script>

 

 兼容问题：给input file 增加accept="image/*" capture="camera"的时候，安卓可以调用摄像头，图库，而苹果机没有图库。所以去掉就可以了，但是在不同页面用的相同的东西，苹果机和部分安卓都成功，只有少部分安卓调不到摄像头，增加accept="video/*" capture="camcorder"就可以全部兼容了。

注：改编自插件，可在文件中下载，移动端可手势移动放大缩小。

完整代码：

<!DOCTYPE html>
<html>
<head>
<title>添加车辆</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="format-detection" content="telephone=no">
<link href="__ROOT__/Public/style/style.css" type="text/css" rel="stylesheet"/>
<link href="__ROOT__/Public/style/icon-font/icon/iconfont.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="__ROOT__/Public/style/icon-font/icon/iconfont.js"></script>
<script type="text/javascript" src="__ROOT__/Public/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/js/jquery.form.js"></script>
<script type="text/javascript" src="__ROOT__/Public/js/jquery.cookie.js"></script>
<script type="text/javascript" src="__ROOT__/Public/mobiscroll/js/mobiscroll.custom-2.5.2.min.js" ></script>
<link type="text/css" href="__ROOT__/Public/mobiscroll/css/mobiscroll.custom-2.5.2.min.css" rel="stylesheet">
<script>
$(function () {
var i = Math.floor($('#treelist>li').length / 2),
j = Math.floor($('#treelist>li').eq(i).find('ul li').length / 2);
$("#treelist").mobiscroll().treelist({
theme: "android-ics light",
lang: "zh",
defaultValue: [i,j],
cancelText: '取消',
setText: '确定',
placeholder: '选择车牌',
headerText: function (valueText) { return "选择车牌"; },
formatResult: function (array) { //返回自定义格式结果
return $('#treelist>li').eq(array[0]).children('span').text()+$('#treelist>li').eq(array[0]).find('ul li').eq(array[1]).text().trim('');
}
});
})
</script>
<style type="text/css">
#clipArea {
height: 64.5rem;
}
#file,
#clipBtn {
margin: 0.833rem;
}
#view {
margin: 0 auto;
width: 8.333rem;
height: 8.333rem;
}
.vehicleListFielImgBox img{
border-radius: 0.3rem;
}
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 100%;
border: 1px solid #fff;
height: 4rem;
outline: none;
font-family: "微软雅黑";
line-height: 4rem;
border: none;
color: #999;
}
option {
line-height: 4rem;
}
.addcarpic ul li {
width:47%;
float: left;
margin-bottom: 4rem;
margin-left:2%;
}
.addcarpic .uploadsVehiclePicLi {
display: table;
position: relative;
margin: 0 auto;
border: #f90 1px dashed;
border-radius:.4rem;
z-index: 0;
}
.addcarpic .close{ position:absolute; right:-.2rem; top:0rem; font-size:1.6rem; z-index:999;filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
z-index:999;
width: 5rem;
height: 5rem;
text-align: right;
}
.vehiclePicBox {
width: 100%;
display:block;
border-radius: .8rem;
position:absolute;
left: 0px;
top:0;
}
.vehiclejiaIcon {
font-size:2.4rem;
width: 100%;
color: #f80;
position: absolute;
text-align: center;
left: 0;
z-index: 10;
height:7rem;
top:50%;
margin-top:0;
line-height:7rem;
}
.weizhi {
position: absolute;
width: 8rem;
text-align: center;
font-size: 1.2rem;
color: #f90;
bottom: .5rem;
z-index: 10;
}
.where {
position: absolute;
width: 100%;
text-align: center;
font-size: 1.4rem;
color: #666;
bottom: -3rem;
z-index: 10;
height: 3rem;
line-height: 3rem;
font-weight: bold;
}
.where .red {
color: #f80;
}
</style>
</head>
<body>

<style>
.mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }
</style>

<div style="padding-top:5.5rem;position: relative;left:0;" class="car_manage">
<div class="order">
<div class="fiexd title-vehicle" style="position: fixed; width:100%;top:0;height:3.8rem;line-height: 3.8rem; text-align:center;background:#ffffff;box-shadow:0 0.35rem 0.35rem 0 rgba(0,0,0,0.08);color:#3b3b3b;font-size: 1.6rem;z-index: 100;">
<!-- 车主服务状况 -->
<span class="fl order3" style="display: inline-block;"><i class="icon iconfont gray" style="margin-left: 1.15rem;margin-right:0.3rem; font-style: normal;color:#3b3b3b;font-size:1.6rem;">&#xe627;</i>返回</span>
<p style="position: absolute;width:100%;text-align: center;font-size:1.7rem;line-height: 3.8rem;">添加车辆</p>
</div>
</div>
<div class="title clearboth bor_b"> <i class="icon iconfont f24 fl orange icon-wode" ></i>&nbsp;车主信息</div>
<form method="post" id="myForm" >
<input type="hidden" value="{$vid}" name="id" id="vid">
<input type="hidden" value="{$_SESSION['userInfo'][0]['openid']}" name="openid">
<input type="hidden" id="hidAddress" name="city" value="{$vehicleInfo[0]['city']}" />
<input type="hidden" id="hidBrand" name="brand" value="{$vehicleInfo[0]['brand']}"/>
<input type="hidden" id="hidBid" name="bid" value="{$vehicleInfo[0]['bid']}"/>
<input type="hidden" id="hidCarType" name="type" value="{$vehicleInfo[0]['type']}"/>
<input type="hidden" id="hidTid" name="tid" value="{$vehicleInfo[0]['tid']}"/>
<input type="hidden" id="hidCarColor" name="VehicleColor" />
<input type="hidden" id="LongitudeAndLatitude" value="" name="LongitudeAndLatitude">
<input type="hidden" id="provinceValue" value="">
<input type="hidden" id="cityValue" value="">
<input type="hidden" id="address" value="" name="address">

<input type="hidden" id="vehiclepic1" value="" name="vehiclepic[1]">
<input type="hidden" id="vehiclepic2" value="" name="vehiclepic[2]">
<input type="hidden" id="vehiclepic3" value="" name="vehiclepic[3]">
<input type="hidden" id="vehiclepic4" value="" name="vehiclepic[4]">
<input type="hidden" id="vehiclepic5" value="" name="vehiclepic[5]">
<input type="hidden" id="vehiclepic6" value="" name="vehiclepic[6]">

<div class="input bor_b" style="height:4rem; overflow:hidden; margin: 0 2rem;">
<input type="text" placeholder="姓名" name="username" id="username" value="{$vehicleInfo[0]['username']}" maxlength="5" >
</div>
<div class="input bor_b" style="height:4rem; overflow:hidden; margin: 0 2rem;">
<input type="tel" placeholder="电话" name="tel" id="tel" value="{$vehicleInfo[0]['tel']}" maxlength="11">
</div>
<div class="input bor_b " style="height:4rem; line-height:4rem; overflow:hidden; margin: 0 2rem;">
<ul id="treelist">
<volist name='vehiclearea' id='vehiclearea'>
<li>
<span>{$vehiclearea.AreaName}</span>
<ul>
<for start="0" end="count($letter)">
<li>{$letter[$i]['LetterName']}</li>
</for>
</ul>
</li>
</volist>
</ul>
<input type="text" name="vehicleNumber" style="width:15rem;height:4rem; line-height:4rem; border:none; outline:none; font-size:1.6rem; font-family:'微软雅黑';" maxlength="5" id="vehicleNumber" placeholder="车牌号">
</div>
<div class="input bor_b clearboth" id="carType" style="line-height:4rem;margin: 0 2rem;font-weight:normal;">
<span class=" gray fl" style="padding-left:.8rem" id="vehicle_info_text">车辆型号</span>
<i class="icon iconfont f18 gray fr" style="float:right">&#xe66c;</i>
</div>
<div class="input bor_b clearboth" id="vehicleAddress" style="line-height:4rem;margin: 0 2rem;font-weight:normal;" >
<span class="selectBox gray fl" style="padding-left:.8rem" id="vehicleAddressText">详细地址</span>
<i class="icon iconfont f18 gray fr">&#xe66c;</i>
</div>
<div style="height:2rem;">&nbsp;</div>
<div class="title clearboth mb2 bor_b"><i class="icon iconfont f20 fl orange">&#xe711;</i>&nbsp;添加车辆行驶证 </div>
<div class="carimg relative" style=" padding:0 2rem;height:17rem;text-align:center">
<div class="close" _onclick="deleteVehiclePhoto(this)" value='0' style="display:none;position: absolute;right:1.8rem;"><i class="icon iconfont icon-icon-cross-squre f24 red"></i></div>
<label for="vehicleListFiel">
<div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:15rem;text-align:center; border:#e1e1e1 1px dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;overflow: hidden;">
<if condition="$vehicleInfo[0]['VehicleLicence'] eq ''">
<div style="width:100%;height:15rem;color:#999">
<span style="font-size:6rem;font-weight:100; margin-top:2rem; display:inline-block">+</span><br />
<span style="font-size:1.6rem; font-weight:bold;">车辆行驶证</span>
</div>
<else />
<img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span>
</if>
</div>
<input class="file" type="file" name="vehicleList" id="vehicleListFiel" style="display:none" value=""/>
</label>
<input type="hidden" id="DrivingLicensePrice" class="DrivingLicensePrice" value="{$vehicleInfo[0]['VehicleLicence']}" />
</div>
</form>
<div class="title clearboth mb2 bor_b"> <i class="icon iconfont f20 fl orange" >&#xe711;</i>&nbsp;添加车辆细节图片 </div>
<div class="addcarpic mb2">
<ul class="uploadsVehiclePicUi" style="padding:0 1rem;">
<li>
<div class="carimg relative" style="width: 100%; _border: #f90 1px dashed;">
<div class="close" _onclick="deleteVehiclePhoto(this)" value='1' style="display:none"><i class="icon iconfont _icon-icon-cross-squre f24" style="position: absolute;top:0;right:0;background-color: black;opacity: 0.7;color:white;">&#xe602;</i></div>
<label for="vehicleListFiel">
<div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:7.5rem;text-align:center; border:#e1e1e1 1px dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;">
<if condition="$vehicleInfo[0]['VehicleLicence'] eq ''">
<div class="vehiclejiaIcon" style="top:0;color:#e1e1e1;"><i class="icon iconfont">&#xe711;</i></div>
<else />
<img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span>
</if>
</div>
<input class="file" type="file" name="vehicleList2" id="vehicleListFie2" style="display:none" value=""/>
</label>
<input type="hidden" id="vehiclepic1" class="vehiclepic" name="vehiclepic[]" value="{$vehicleInfo[0]['VehicleLicence']}" />
<input type="hidden" value="车头" name="position">
<div class="where"> <span class="red">★</span> 车头 </div>
</div>
</li>
<li>
<div class="carimg relative" style="width: 100%; _border: #f90 1px dashed;">
<div class="close" _onclick="deleteVehiclePhoto(this)" value='2' style="display:none"><i class="icon iconfont _icon-icon-cross-squre f24" style="position: absolute;top:0;right:0;background-color: black;opacity: 0.7;color:white;">&#xe602;</i></div>
<label for="vehicleListFiel">
<div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:7.5rem;text-align:center; border:#e1e1e1 1px dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;">
<if condition="$vehicleInfo[0]['VehicleLicence'] eq ''">
<div class="vehiclejiaIcon" style="top:0;color:#e1e1e1;"><i class="icon iconfont">&#xe711;</i></div>
<else />
<img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span>
</if>
</div>
<input class="file" type="file" name="vehicleList3" id="vehicleListFie3" style="display:none" value=""/>
</label>
<input type="hidden" id="vehiclepic2" class="vehiclepic" name="vehiclepic[]" value="{$vehicleInfo[0]['VehicleLicence']}" />
<input type="hidden" value="车身" name="position">
<div class="where"> <span class="red">★</span> 车身 </div>
</div>
</li>
<li>
<div class="carimg relative" style="width: 100%; _border: #f90 1px dashed;">
<div class="close" _onclick="deleteVehiclePhoto(this)" value='3' style="display:none"><i class="icon iconfont _icon-icon-cross-squre f24" style="position: absolute;top:0;right:0;background-color: black;opacity: 0.7;color:white;">&#xe602;</i></div>
<label for="vehicleListFiel">
<div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:7.5rem;text-align:center; border:#e1e1e1 1px dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;">
<if condition="$vehicleInfo[0]['VehicleLicence'] eq ''">
<div class="vehiclejiaIcon" style="top:0;color:#e1e1e1;"><i class="icon iconfont">&#xe711;</i></div>
<else />
<img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span>
</if>
</div>
<input class="file" type="file" name="vehicleList4" id="vehicleListFie4" style="display:none" value=""/>
</label>
<input type="hidden" id="vehiclepic3" class="vehiclepic" name="vehiclepic[]" value="{$vehicleInfo[0]['VehicleLicence']}" />
<input type="hidden" value="车尾" name="position">
<div class="where"> <span class="red">★</span> 车尾 </div>
</div>
</li>
<li>
<div class="carimg relative" style="width: 100%; ">
<div class="close" _onclick="deleteVehiclePhoto(this)" value='4' style="display:none"><i class="icon iconfont _icon-icon-cross-squre f24" style="position: absolute;top:0;right:0;background-color: black;opacity: 0.7;color:white;">&#xe602;</i></div>
<label for="vehicleListFiel">
<div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:7.5rem;text-align:center; border:#e1e1e1 1px dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;">
<if condition="$vehicleInfo[0]['VehicleLicence'] eq ''">
<div class="vehiclejiaIcon" style="top:0;color:#e1e1e1;"><i class="icon iconfont">&#xe711;</i></div>
<else />
<img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span>
</if>
</div>
<input class="file" type="file" name="vehicleList" id="vehicleListFiel" style="display:none" value=""/>
</label>
<input type="hidden" id="vehiclepic4" class="vehiclepic" name="vehiclepic[]" value="{$vehicleInfo[0]['VehicleLicence']}" />
<input type="hidden" value="内饰" name="position">
<div class="where"> <span class="red">★</span> 内饰 </div>
</div>
</li>
<li>
<div class="carimg relative" style="width: 100%;">
<div class="close" _onclick="deleteVehiclePhoto(this)" value='5' style="display:none"><i class="icon iconfont _icon-icon-cross-squre f24" style="position: absolute;top:0;right:0;background-color: black;opacity: 0.7;color:white;">&#xe602;</i></div>
<label for="vehicleListFiel">
<div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:7.5rem;text-align:center; border:#e1e1e1 1px dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;">
<if condition="$vehicleInfo[0]['VehicleLicence'] eq ''">
<div class="vehiclejiaIcon" style="top:0;color:#e1e1e1;"><i class="icon iconfont">&#xe711;</i></div>
<else />
<img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span>
</if>
</div>
<input class="file" type="file" name="vehicleList5" id="vehicleListFie5" style="display:none" value=""/>
</label>
<input type="hidden" id="vehiclepic5" class="vehiclepic" name="vehiclepic[]" value="{$vehicleInfo[0]['VehicleLicence']}" />
<input type="hidden" value="其他" name="position">
<div class="where"> <span class="red">★</span> 其他</div>
</div>
</li>
<li>
<div class="carimg relative" style="width: 100%;">
<div class="close" _onclick="deleteVehiclePhoto(this)" value='6' style="display:none"><i class="icon iconfont _icon-icon-cross-squre f24" style="position: absolute;top:0;right:0;background-color: black;opacity: 0.7;color:white;">&#xe602;</i></div>
<label for="vehicleListFiel">
<div id="vehicleListFielImgBox" class="vehicleListFielImgBox" style="width:100%;height:7.5rem;text-align:center; border:#e1e1e1 1px dashed; border-radius:.4rem; -webkit-border-radius:.4rem; -moz-border-radius:.4rem; -o-border-radius:.4rem;">
<if condition="$vehicleInfo[0]['VehicleLicence'] eq ''">
<div class="vehiclejiaIcon" style="top:0;color:#e1e1e1;"><i class="icon iconfont">&#xe711;</i></div>
<else />
<img src="__ROOT__/Uploads/VehiclePic/{$vehicleInfo[0]['VehicleLicence']}" alt="暂无图片" style="width:100%;height:100%;" ><span>{$vehicleList.statusName}</span>
</if>
</div>
<input class="file" type="file" name="vehicleList6" id="vehicleListFie6" style="display:none" value=""/>
</label>
<input type="hidden" id="vehiclepic6" class="vehiclepic" name="vehiclepic[]" value="{$vehicleInfo[0]['VehicleLicence']}" />
<input type="hidden" value="其他" name="position">
<div class="where"> <span class="red">★</span> 其他 </div>
</div>
</li>
</ul>
<div style=" clear:both;"></div>
</div>
<div class="orange" style="padding:2rem; line-height:2.4rem; font-size:1.4rem;"> <span>展示照片,号牌需清晰可见.详尽的展示照片,能为您争取来更多的客户！</span> </div>
</div>
<div class="pad1 mb2 getDriverInfoButton" >
<button class="button" id="getDriverInfoButton" style="margin:0;">提交审核</button>
</div>
<include file="Public/addVehicleSelectAddressMap" />
<article class="htmleaf-container" id="uploadPage" style="display: none">
<div id="clipArea"></div>
<div>
<button id="refile" style="position: fixed;bottom:4rem;left:20%;border:none;background-color: transparent;font-size: 2rem;color:#ffffff;">取消</button>
<button id="clipBtn" style="margin:0;position: fixed;bottom:4rem;right:20%;border:none;background-color: transparent;font-size: 2rem;color:#ffffff;">截取</button>
</div>

<div id="view" style="display: none;"></div>
</article>
<!--城市列表-->
{:W('Common/Cate/cityList')}
<!--用户选择地址-->
{:W('Common/Cate/userSelectAddressMap')}
</body>
<script src="__ROOT__/Public/js/Adaptive.js"></script>
<script src="__ROOT__/Public/js/iscroll-zoom.js"></script>
<script src="__ROOT__/Public/js/hammer.js"></script>
<script src="__ROOT__/Public/js/jquery.photoClip.js"></script>
<script src="__ROOT__/Public/js/exif.js"></script>
<script type="text/javascript">
$('.title-vehicle').click(function(){
window.history.back(-1);
})

// 详细地址部分
$("#vehicle_info_text").text(localStorage.msg);
$("#vehicleAddress").click(function() {
$('.car_manage').hide();
$("#floorNumber").val("");
var overscroll= function(el) {
el.addEventListener('touchstart', function() {
var top = el.scrollTop
, totalScroll = el.scrollHeight
, currentScroll = top + el.offsetHeight;
//If we're at the top or the bottom of the containers
//scroll, push up or down one pixel.
//this prevents the scroll from "passing through" to
//the body.
if(top === 0) {
el.scrollTop = 1;
} else if(currentScroll === totalScroll) {
el.scrollTop = top - 1;
}
console.log("touchstart");
});
el.addEventListener('touchmove', function(evt) {
//if the content is actually scrollable, i.e. the content is long enough
//that scrolling can occur
// evt=evt;
console.log("touchmove");
if(el.offsetHeight < el.scrollHeight)
evt._isScroller = true;
});
}
overscroll(document.querySelector('.nearDivs'));
document.body.addEventListener('touchmove', function(evt) {
//In this case, the default behavior is scrolling the body, which
//would result in an overflow. Since we don't want that, we preventDefault.
if(!evt._isScroller) {
console.log("["+evt.target.id+"]不能动["+evt.target.className+"]不能动["+evt.target.innerHTML+"]不能动");
}
overscroll(document.querySelector('.sort_box'));
});
$("#nearDiv").show();
$("#userSelectMap").show();
pushHistory();
window.addEventListener("popstate", function(e) {
$("#userSelectMap").animate({
left:"100%",
},100);

$("#nearDiv").animate({
left:"100%",
},100);
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
document.addEventListener("WeixinJSBridgeReady",function(){ WeixinJSBridge.call("showToolbar")});
$("#userSelectMap").animate({
left:"0px",
},100);
$("#nearDiv").animate({
left:"0px",
},100);

addressTwoText=$("input[name='addressTwo']").val();
addressThreeText=$("input[name='addressThree']").val();
ThisAddressTextLink=$(this);
console.log(ThisAddressTextLink);
$(".addressGetButton").click(function() {
$('.car_manage').show();
$('#userSelectMap').hide();
$("#nearDiv").hide();
var addressText=$("#cityValue").val()+$("#suggestId1").val()+$("#floorNumber").val();
$('#vehicleAddressText').html(addressText);
console.log(addressText);
$("#nearDiv").animate({
left:"100%",
},100);
$("#userSelectMap").animate({
left:"100%",
},100);
});
});
//获取跳转前缓存信息
var g = $('form').serializeArray();
$.each(g, function() {
if(this.name == 'hidCarType'){

}
var type5 = $.cookie('type5');
if(type5){
var jsonObj=JSON.parse(type5);
$("#hidBrand").val(jsonObj.Vehicle_Brand);
$("#hidCarType").val(jsonObj.Vehicle_Type);
$("#hidCarColor").val(jsonObj.Vehicle_Color);
$("#hidBid").val(jsonObj.Bid);
$("#hidTid").val(jsonObj.Tid);
var cardTypeHtml= jsonObj.Vehicle_Brand + " " + jsonObj.Vehicle_Type +" "+ jsonObj.Vehicle_Color;
$("#vehicle_info_text").text(cardTypeHtml);
}
var c = $.cookie(this.name);
$('#'+this.name).val(c);
});

//即将跳转，缓存已填写数据
$('#carType').click(function() {
var gg = $('form').serializeArray();
$.each(gg, function(index) {
if(this.value){
$.cookie(this.name, this.value);
}
});
window.location.href="{:U('Home/Index/vehiclebran', array('typeid'=>5))}";
});

$(".carimg").each(function() {
my_element=$(this).find(".DrivingLicensePrice").val();
if(my_element){
$(this).find(".close").show();
}else{
$(this).find(".close").hide();
}
});
// 判断点击第几个
window.onload = function(){
var imgs = getElementByClassName("file");
num=0;
for(var i=0;i<imgs.length;i++){
imgs[i].parentNode.onclick = (function(i){
return function(){
if(!i==0){
num=i;
console.log(num);
}
}
})(i)
}
}
function getElementByClassName(className){
var elems = [];
if(!document.getElementsByClassName){
alert("no exit");
var dom = document.getElementByTagName('*');
for(var i = 0;i<dom.length;i++){
if(dom[i].className == className)
elems.push(dom[i]);
}
}else{
elems = document.getElementsByClassName(className);
}
return elems;
}
// 上传图片
$("#clipArea").photoClip({
width: 200,
height: 200,
file: ".file",
view: "#view",
ok: "#clipBtn",
loadStart: function() {
$('#uploadPage').show();
$('.car_manage').hide();
$('.getDriverInfoButton').hide();
console.log("照片读取中");
//获取照片方向角属性，用户旋转控制
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
$('#uploadPage').hide();
$('.car_manage').show();
$('.getDriverInfoButton').show();
console.log(dataURL);
aa(dataURL);
function aa(res) {
$.ajax({
type:"post",
url:"{:U('Vehicle/index/uploadvehicle')}",
//url:"{:U('Vehicle/index/uploadVehiclePic')}",
data:{base64:res,num:num},
dataType:'json',
async:true,
success:function(ee){
if(ee.status==1){
$(".vehicleListFielImgBox").eq(num).empty();
$(".vehicleListFielImgBox").eq(num).append('<img id="imgrote" style="width:100%;height:100%;" src="'+ee.info[0]+'"/>');
$(".vehicleListFielImgBox").eq(num).parent().parent().find(".close").show();
$(".vehicleListFielImgBox").eq(num).parent().parent().find('.DrivingLicensePrice').val(ee.info[0]);
if(num>=1){
$("#vehiclepic"+num).val(ee.info[1]);
}
num=0;
}else{
alert(ee.info);
}
},
error:function(ee){
alert(ee.info);
}
});
}
}

});
$('#refile').on('click',function(){
$('#uploadPage').hide();
$('.car_manage').show();
$('.getDriverInfoButton').show();
})
// //删除车辆图片
$('.close').on('click',function(){
num = $(this).attr("value");
if(confirm("确定要删除吗？")){
$.ajax({
type: "POST",
url: "{:U('Vehicle/index/uploadvehicle')}",
data: {pid:$(this).parent().find(".vehicleListFielImgBox").html()},
// data: {pid:$(obj).parent().find(".DrivingLicensePrice").val()},
dataType:"text",
success: function(data) {
if(data==1){
alert(data);
}else{
// alert("else"+data);
$('.close').eq(num).parent().find(".vehicleListFielImgBox").empty();
$(".close").eq(num).hide();
$('.close').eq(num).parent().find('.vehicleListFielImgBox').append('<div class="vehiclejiaIcon" style="top:0;color:#e1e1e1;"><i class="icon iconfont">&#xe711;</i></div>');
num=0;
return false;
}
},
error:function(data){
alert(data);
}
});
}
})


//选择车型
/* $("#carType").click(function () {
var username = $('#username').val();
var tel = $('#tel').val();
var treelist_dummy = $('#treelist_dummy').val();
var vehicleNumber = $('#vehicleNumber').val();
var jsonData={"username":username,"tel":tel,"treelist_dummy":treelist_dummy,"vehicleNumber":vehicleNumber};//保存成json数据
var str_jsonData=JSON.stringify(jsonData);//转换字符
$.cookie('addvehicle', str_jsonData, { expires:1 });//使用coolie保存数据
window.location.href="{:U('Home/Index/vehiclebran', array('typeid'=>5))}";
});*/

$(".cityList").click(function () {
$("#hidAddress").val($(this).find(".num_name").text());
$("#city_text").text($(this).find(".num_name").text());
$("#cityListBox").hide();
});

//表单验证
$("#getDriverInfoButton").click(function() {
if(!$("#username").val()){
alert("请填写车主姓名");
$("#username").select();
$("#username").focus();
return false;
}else if(!$("#tel").val()){
alert("请填写车主手机号");
$("#tel").select();
$("#tel").focus();
return false;
}else if(!/^1[3|4|5|8]\d{9}$/.test($("#tel").val())){
alert("填写的电话号码格式有错误！");
$("#tel").select();
$("#tel").focus();
return false;
}else if(!$("#treelist_dummy").val()){
alert("请填写车牌号");
$("#treelist_dummy").select();
$("#treelist_dummy").focus();
return false;
}else if(!$("#DrivingLicensePrice").val()){
alert("请上传行驶证图片");
return false;
}else if(!$("#vehicleNumber").val()){
alert("请填写车牌号");
$("#vehicleNumber").select();
$("#vehicleNumber").focus();
return false;
}else if(!$("#hidBrand").val()){
alert("请选择车辆品牌");
return false;
}else if(!$("#hidCarType").val()){
alert("请选择车辆型号");
return false;
}else if(!$("#hidCarColor").val()){
alert("请选择车辆颜色");
return false;
}
else if(!$("#vehiclepic1").val()){
alert("请上传车头图片");
return false;
}else if(!$("#vehiclepic2").val()){
alert("请上传车身图片");
return false;
}else if(!$("#vehiclepic3").val()){
alert("请上传车尾图片");
return false;
}else if(!$("#vehiclepic4").val()){
alert("请上传内饰图片");
return false;
}else{
$.ajax({
type: "POST",
url: "{:U('Vehicle/Index/insertVehicle')}",
data: $("#myForm").serialize(),
dataType:'json',
async:true,
success: function(data) {
localStorage.clear();
if(data.status==1){
alert('车辆信息提交审核');
window.location.href="{:U('Vehicle/Index/vehicleManagement')}";
}else{
alert(data.info);
return false;
}
},
error: function(request) {
alert("Connection error");
}
});
}
});
</script>
</html>

效果图：

posted @ 2017-06-01 17:38  永往  阅读(383)  评论(0)    收藏  举报