自学apicloud【Apicloud——关于上传图片、视频】
2024-06-03 00:56:50
自己根据需要写了一个
需求：
读取已有图片实现预览——》实现点击方框动态添加多图，删除，实现预览——》提交，实现图片修改
效果图：
代码：
现有问题，写到现在的几篇，其中发的代码都太长了，主要是太懒了没有二次整理，这篇以后就不这样了，
因为发现我回头再看代码的时候，自己都觉得乱，毕竟把它写下来就是为了方便二次记忆学习的，现在这样已经不对了。
今天这个是最长的。
写的比较惨，其中改了好多次，其实上传最终也是对dom的操作，无论删除和添加，图片地址获取到，删除dom节点与添加dom节点就是实现了图片的删除与添加
最后的提交，实现了图片的修改（也就是服务器里面的图片地址的增删改），统一获取有图片的dom节点，获取图片地址 ，最终实现提交。
1 <!DOCTYPE HTML>2 <html>3 4 <head>5 <meta charset="utf-8">6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />7 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">8 <title>业务员-终审上传资料</title>9 <link rel="stylesheet" type="text/css" href="../css/aui.css" />10 <link rel="stylesheet" type="text/css" href="../css/api.css" />11 <link rel="stylesheet" type="text/css" href="../css/style.css" />12 <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />13 <style media="screen">14 .kuang {15 height: 80%;16 width: 100%;17 /*border: 1px solid;*/18 background-color: #fff;19 padding-left: 5px;20 padding-right: 5px;21 }22 23 .top {24 height: 34px;25 display: flex;26 align-items: center;27 padding-left: 10px;28 }29 30 .img {31 height: auto;32 display: flex;33 align-items: center;34 flex-wrap: wrap;35 /*padding-left: 10px*/36 }37 38 .c {39 width: 100%;40 border-top: 1px solid #c9c9c9;41 margin-bottom: 5px;42 }43 44 .z img {45 height: 106px;46 width: 106px;47 border: 1px dashed #c9c9c9;48 border-radius: 6px;49 }50 51 video {52 height: 170px;53 width: 200px;54 }55 56 #xyvideo {57 height: 170px;58 width: 260px;59 border: 1px dashed #c9c9c9;60 border-radius: 6px;61 display: flex;62 justify-content: center;63 align-items: center;64 }65 66 #htvideo {67 height: 170px;68 width: 260px;69 border: 1px dashed #c9c9c9;70 border-radius: 6px;71 display: flex;72 justify-content: center;73 align-items: center;74 }75 76 .videohi {77 height: 180px;78 }79 80 .mui-bar {81 width: 100%;82 height: 80px;83 background-color: #1296db;84 /*text-align: center;*/85 line-height: 80px;86 color: #fff;87 font-size: 18px;88 }89 /*#nav{90 height: 50px;91 }*/92 93 .customer {94 height: auto;95 /*border: 1px solid;*/96 }97 98 .tzi {99 display: flex;100 justify-content: center;101 align-items: center;102 font-size: 11px;103 padding-top: 2px;104 color: #868686;105 }106 107 .jg {108 margin-right: 20px;109 }110 111 .san {112 display: flex;113 justify-content: space-around;114 }115 116 .z {117 padding-top: 80px;118 }119 120 .fangku {121 height: auto;122 }123 124 .fangku2 {125 height: auto;126 }127 128 .fangku3 {129 height: auto;130 }131 132 #bigpic {133 margin: 0px;134 }135 136 #bigpic img {137 height: 200px;138 width: 100%;139 margin: 20px auto;140 }141 </style>142 </head>143 144 <body>145 146 <header style="display:flex;flex-direction:column-reverse;" class="buy_car_wrap00 mui-bar" id="header">147 <div style="width:100%;height:60px;display:flex;justify-content:space-around;align-items:center;">148 <div class="buy_car_arrowl" οnclick="api.closeWin()"></div>149 <div style="height:100%;width:65%;display:flex;align-items:center;justify-content:center;">上传终审资料</div>150 <div></div>151 </div>152 </header>153 154 <div class="z">155 <!-- 第一页 -->156 <div class='firstchild hid' style="margin-bottom:80px;">157 <div class='fangku'>158 <div class="customer">159 <div class="top">借款合同</div>160 <div class="kuang">161 <div class="img">162 <div style="margin:5px;" id="jkhttest">163 <img src="../icon/zxj.png" alt="" id="jkht">164 <div class="tzi">165 添加166 </div>167 </div>168 169 </div>170 <div class="c"></div>171 </div>172 </div>173 <!-- 视频 -->174 <div class="customer">175 <div class="top">借款合同视频</div>176 <div class="kuang">177 <div class="img" id="ko">178 <div style="margin:5px;" id="jkhtVideo_test">179 <img src="../icon/sp.png" alt="" id="jkhtVideo">180 <div class="tzi">181 添加182 </div>183 </div>184 185 </div>186 <div class="c"></div>187 </div>188 </div>189 190 </div>191 <!-- 借款居间协议 -->192 <div class='fangku'>193 <div class="customer">194 <div class="top">借款居间协议</div>195 <div class="kuang">196 <div class="img">197 <div style="margin:5px;" id="jkjjxytest">198 <img src="../icon/zxj.png" alt="" id="jkjjxy">199 <div class="tzi">200 添加201 </div>202 </div>203 204 </div>205 <div class="c"></div>206 </div>207 </div>208 <!-- 视频 -->209 <div class="customer">210 <div class="top">借款居间协议视频</div>211 <div class="kuang">212 <div class="img">213 <div style="margin:5px;" id="jkjjxyVideo_test">214 <img src="../icon/sp.png" alt="" id="jkjjxyVideo">215 <div class="tzi">216 添加217 </div>218 </div>219 </div>220 <div class="c"></div>221 </div>222 </div>223 224 </div>225 226 <nav class="mui-bar mui-bar-tab next1 nav" id="nav1" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;margin-left:50%;">227 <div style="height:50px;display:flex;justify-content: center;align-items: center;">下一页</div>228 </nav>229 230 <nav class="mui-bar mui-bar-tab top1 nav" id="nav2" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;">231 <div style="height:50px;display:flex;justify-content: center;align-items: center;">首页</div>232 </nav>233 </div>234 235 <!-- 第二页 -->236 <div class='secondchild hid' style="margin-bottom:80px;display:none;">237 <div class='fangku2'>238 <div class="customer">239 <div class="top">汽车租赁合同</div>240 <div class="kuang">241 <div class="img">242 <div style="margin:5px;" id="qczlhttest">243 <img src="../icon/zxj.png" alt="" id="qczlht">244 <div class="tzi">添加245 </div>246 </div>247 </div>248 <div class="c"></div>249 </div>250 251 </div>252 </div>253 254 <div class='fangku2'>255 <div class="customer">256 <div class="top">担保函</div>257 <div class="kuang">258 <div class="img">259 <div style="margin:5px;" id="dbhtest">260 <img src="../icon/zxj.png" alt="" id="dbh">261 <div class="tzi">添加262 </div>263 </div>264 </div>265 <div class="c"></div>266 </div>267 268 </div>269 </div>270 271 <div class='fangku2'>272 <div class="customer">273 <div class="top">说明承诺函</div>274 <div class="kuang">275 <div class="img">276 <div style="margin:5px;" id="smclstest">277 <img src="../icon/zxj.png" alt="" id="smcls">278 <div class="tzi">添加279 </div>280 </div>281 </div>282 <div class="c"></div>283 </div>284 285 </div>286 </div>287 288 <div class='fangku2'>289 <div class="customer">290 <div class="top">转付说明函</div>291 <div class="kuang">292 <div class="img">293 <div style="margin:5px;" id="zfsmstest">294 <img src="../icon/zxj.png" alt="" id="zfsms">295 <div class="tzi">添加296 </div>297 </div>298 </div>299 <div class="c"></div>300 </div>301 302 </div>303 </div>304 305 <div class='fangku2'>306 <div class="customer">307 <div class="top">保险未生效告知书</div>308 <div class="kuang">309 <div class="img">310 <div style="margin:5px;" id="bxwsxgzstest">311 <img src="../icon/zxj.png" alt="" id="bxwsxgzs">312 <div class="tzi">添加313 </div>314 </div>315 </div>316 <div class="c"></div>317 </div>318 319 </div>320 </div>321 322 <div class='fangku2'>323 <div class="customer">324 <div class="top">借条</div>325 <div class="kuang">326 <div class="img">327 <div style="margin:5px;" id="jttest">328 <img src="../icon/zxj.png" alt="" id="jt">329 <div class="tzi">添加330 </div>331 </div>332 </div>333 <div class="c"></div>334 </div>335 336 </div>337 </div>338 339 <nav class="mui-bar mui-bar-tab next2 nav" id="nav3" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;margin-left:50%;">340 <div style="height:50px;display:flex;justify-content: center;align-items: center;">下一页</div>341 </nav>342 343 <nav class="mui-bar mui-bar-tab top2 nav" id="nav4" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;">344 <div style="height:50px;display:flex;justify-content: center;align-items: center;">上一页</div>345 </nav>346 </div>347 348 <!-- 第三页 -->349 <div class='thirdchild hid' style="margin-bottom:80px;display:none;">350 <div class='fangku2'>351 <div class="customer">352 <div class="top">送达地址确认书</div>353 <div class="kuang">354 <div class="img">355 <div style="margin:5px;" id="sddzqrstest">356 <img src="../icon/zxj.png" alt="" id="sddzqrs">357 <div class="tzi">添加358 </div>359 </div>360 </div>361 <div class="c"></div>362 </div>363 364 </div>365 </div>366 367 <div class='fangku2'>368 <div class="customer">369 <div class="top">转账截图</div>370 <div class="kuang">371 <div class="img">372 <div style="margin:5px;" id="zzjttest">373 <img src="../icon/zxj.png" alt="" id="zzjt">374 <div class="tzi">添加375 </div>376 </div>377 </div>378 <div class="c"></div>379 </div>380 381 </div>382 </div>383 384 <div class='fangku2'>385 <div class="customer">386 <div class="top">车辆交接单</div>387 <div class="kuang">388 <div class="img">389 <div style="margin:5px;" id="cljjdtest">390 <img src="../icon/zxj.png" alt="" id="cljjd">391 <div class="tzi">添加392 </div>393 </div>394 </div>395 <div class="c"></div>396 </div>397 398 </div>399 </div>400 401 <div class='fangku2'>402 <div class="customer">403 <div class="top">每月还款信息表</div>404 <div class="kuang">405 <div class="img">406 <div style="margin:5px;" id="myhkxxbtest">407 <img src="../icon/zxj.png" alt="" id="myhkxxb">408 <div class="tzi">添加409 </div>410 </div>411 </div>412 <div class="c"></div>413 </div>414 415 </div>416 </div>417 418 <div class='fangku2'>419 <div class="customer">420 <div class="top">委托收款授权书</div>421 <div class="kuang">422 <div class="img">423 <div style="margin:5px;" id="wtsksqstest">424 <img src="../icon/zxj.png" alt="" id="wtsksqs">425 <div class="tzi">添加426 </div>427 </div>428 </div>429 <div class="c"></div>430 </div>431 432 </div>433 </div>434 435 <div class='fangku2'>436 <div class="customer">437 <div class="top">手持身份证照</div>438 <div class="kuang">439 <div class="img">440 <div style="margin:5px;" id="scsfzztest">441 <img src="../icon/zxj.png" alt="" id="scsfzz">442 <div class="tzi">添加443 </div>444 </div>445 </div>446 <div class="c"></div>447 </div>448 449 </div>450 </div>451 452 <nav class="mui-bar mui-bar-tab next3 nav" id="nav5" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;margin-left:50%;">453 <div style="height:50px;display:flex;justify-content: center;align-items: center;">下一页</div>454 </nav>455 456 <nav class="mui-bar mui-bar-tab top3 nav" id="nav6" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;">457 <div style="height:50px;display:flex;justify-content: center;align-items: center;">上一页</div>458 </nav>459 </div>460 461 <!-- 第四页 -->462 <div class='fourthchild hid' style="margin-bottom:80px;display:none;">463 <div class="fangku3">464 <div class="customer">465 <div class="top">车辆实拍</div>466 <div class="kuang">467 <div class="img san">468 <div style="margin:5px;">469 <div οnclick="enlarge(this,'cl_cqtp');">470 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">471 </div>472 <img src="../icon/zxj.png" alt="" id="cl_cqtp" οnclick="zsadd(null, null, null, 'cl_cqtp',1)">473 <div class="tzi">474 车前图片475 </div>476 </div>477 <div style="margin:5px;">478 <div οnclick="enlarge(this,'cl_chtp');">479 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">480 </div>481 <img src="../icon/zxj.png" alt="" id="cl_chtp" οnclick="zsadd(null, null, null, 'cl_chtp',1)">482 <div class="tzi">483 车后图片484 </div>485 </div>486 <div style="margin:5px;">487 <div οnclick="enlarge(this,'cl_cztp');">488 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">489 </div>490 <img src="../icon/zxj.png" alt="" id="cl_cztp" οnclick="zsadd(null, null, null, 'cl_cztp',1)">491 <div class="tzi">492 车左图片493 </div>494 </div>495 </div>496 <div class="c"></div>497 </div>498 499 <div class="kuang">500 <div class="img san">501 <div style="margin:5px;">502 <div οnclick="enlarge(this,'cl_cytp');">503 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">504 </div>505 <img src="../icon/zxj.png" alt="" id="cl_cytp" οnclick="zsadd(null, null, null, 'cl_cytp',1)">506 <div class="tzi">507 车右图片508 </div>509 </div>510 <div style="margin:5px;">511 <div οnclick="enlarge(this,'cl_fdj');">512 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">513 </div>514 <img src="../icon/zxj.png" alt="" id="cl_fdj" οnclick="zsadd(null, null, null, 'cl_fdj',1)">515 <div class="tzi">516 发动机517 </div>518 </div>519 <div style="margin:5px;">520 <div οnclick="enlarge(this,'cl_tc');">521 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">522 </div>523 <img src="../icon/zxj.png" alt="" id="cl_tc" οnclick="zsadd(null, null, null, 'cl_tc',1)">524 <div class="tzi">525 天窗526 </div>527 </div>528 </div>529 <div class="c"></div>530 </div>531 532 <div class="kuang">533 <div class="img san">534 <div style="margin:5px;">535 <div οnclick="enlarge(this,'cl_zk');">536 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">537 </div>538 <img src="../icon/zxj.png" alt="" id="cl_zk" οnclick="zsadd(null, null, null, 'cl_zk',1)">539 <div class="tzi">540 中控541 </div>542 </div>543 <div style="margin:5px;">544 <div οnclick="enlarge(this,'cl_ybp');">545 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">546 </div>547 <img src="../icon/zxj.png" alt="" id="cl_ybp" οnclick="zsadd(null, null, null, 'cl_ybp',1)">548 <div class="tzi">549 仪表盘550 </div>551 </div>552 <div style="margin:5px;">553 <div οnclick="enlarge(this,'cl_mp');">554 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">555 </div>556 <img src="../icon/zxj.png" alt="" id="cl_mp" οnclick="zsadd(null, null, null, 'cl_mp',1)">557 <div class="tzi">558 铭牌559 </div>560 </div>561 </div>562 <div class="c"></div>563 </div>564 565 <div class="kuang">566 <div class="img san">567 <div style="margin:5px;">568 <div οnclick="enlarge(this,'cl_cjh');">569 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">570 </div>571 <img src="../icon/zxj.png" alt="" id="cl_cjh" οnclick="zsadd(null, null, null, 'cl_cjh',1)">572 <div class="tzi">573 车架号574 </div>575 </div>576 <div style="margin:5px;">577 <div οnclick="enlarge(this,'cl_hbx');">578 <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;width:25px;border:none;position: absolute;float:left;">579 </div>580 <img src="../icon/zxj.png" alt="" id="cl_hbx" οnclick="zsadd(null, null, null, 'cl_hbx',1)">581 <div class="tzi">582 后背箱583 </div>584 </div>585 <div style="margin:5px;">586 <img src="../icon/zxj.png" alt="">587 <div class="tzi">588 未定义589 </div>590 </div>591 </div>592 <div class="c"></div>593 </div>594 </div>595 596 </div>597 598 <div class='fangku2'>599 <div class="customer">600 <div class="top">购车发票</div>601 <div class="kuang">602 <div class="img">603 <div style="margin:5px;" id="gcfptest">604 <img src="../icon/zxj.png" alt="" id="gcfp">605 <div class="tzi">添加606 </div>607 </div>608 </div>609 <div class="c"></div>610 </div>611 612 </div>613 </div>614 615 <div class='fangku2'>616 <div class="customer">617 <div class="top">购置税发票</div>618 <div class="kuang">619 <div class="img">620 <div style="margin:5px;" id="gzsfptest">621 <img src="../icon/zxj.png" alt="" id="gzsfp">622 <div class="tzi">添加623 </div>624 </div>625 </div>626 <div class="c"></div>627 </div>628 629 </div>630 </div>631 632 <nav class="mui-bar mui-bar-tab next4 nav" id="nav7" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;margin-left:50%;">633 <div style="height:50px;display:flex;justify-content: center;align-items: center;">下一页</div>634 </nav>635 636 <nav class="mui-bar mui-bar-tab top4 nav" id="nav8" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;">637 <div style="height:50px;display:flex;justify-content: center;align-items: center;">上一页</div>638 </nav>639 </div>640 641 <!-- 第五页 -->642 <div class='fifthchild hid' style="margin-bottom:80px;display:none;">643 <div class='fangku2'>644 <div class="customer">645 <div class="top">行驶证</div>646 <div class="kuang">647 <div class="img">648 <div style="margin:5px;" id="xsztest">649 <img src="../icon/zxj.png" alt="" id="xsz">650 <div class="tzi">添加651 </div>652 </div>653 </div>654 <div class="c"></div>655 </div>656 </div>657 </div>658 659 <div class='fangku2'>660 <div class="customer">661 <div class="top">产权证</div>662 <div class="kuang">663 <div class="img">664 <div style="margin:5px;" id="cqzhtest">665 <img src="../icon/zxj.png" alt="" id="cqzh">666 <div class="tzi">添加667 </div>668 </div>669 </div>670 <div class="c"></div>671 </div>672 673 </div>674 </div>675 676 <div class='fangku2'>677 <div class="customer">678 <div class="top">车钥匙</div>679 <div class="kuang">680 <div class="img">681 <div style="margin:5px;" id="cyshtest">682 <img src="../icon/zxj.png" alt="" id="cysh">683 <div class="tzi">添加684 </div>685 </div>686 </div>687 <div class="c"></div>688 </div>689 690 </div>691 </div>692 693 <div class='fangku2'>694 <div class="customer">695 <div class="top">2份保单</div>696 <div class="kuang">697 <div class="img">698 <div style="margin:5px;" id="bdtest">699 <img src="../icon/zxj.png" alt="" id="bd">700 <div class="tzi">添加701 </div>702 </div>703 </div>704 <div class="c"></div>705 </div>706 </div>707 </div>708 709 <div class='fangku2'>710 <div class="customer">711 <div class="top">GPS定位截图</div>712 <div class="kuang">713 <div class="img">714 <div style="margin:5px;" id="gpsdwjttest">715 <img src="../icon/zxj.png" alt="" id="gpsdwjt">716 <div class="tzi">添加717 </div>718 </div>719 </div>720 <div class="c"></div>721 </div>722 723 </div>724 </div>725 726 <div class='fangku2'>727 <div class="customer">728 <div class="top">人车合影照片</div>729 <div class="kuang">730 <div class="img">731 <div style="margin:5px;" id="rchyzptest">732 <img src="../icon/zxj.png" alt="" id="rchyzp">733 <div class="tzi">添加734 </div>735 </div>736 </div>737 <div class="c"></div>738 </div>739 740 </div>741 </div>742 743 <div class='fangku2'>744 <div class="customer">745 <div class="top">上线资料</div>746 <div class="kuang">747 <div class="img">748 <div style="margin:5px;" id="sxzltest">749 <img src="../icon/zxj.png" alt="" id="sxzl">750 <div class="tzi">添加751 </div>752 </div>753 </div>754 <div class="c"></div>755 </div>756 757 </div>758 </div>759 760 <nav class="mui-bar mui-bar-tab next5 nav" id="nav9" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;margin-left:50%;">761 <div style="height:50px;display:flex;justify-content: center;align-items: center;">提交</div>762 </nav>763 764 <nav class="mui-bar mui-bar-tab top5 nav" id="nav10" style="width:50%;height:50px;display:flex;justify-content: center;align-items: center;">765 <div style="height:50px;display:flex;justify-content: center;align-items: center;">上一页</div>766 </nav>767 </div>768 769 </div>770 771 <div style="display:none;background-color:black;opacity: 0.9;position:absolute;z-index:9999!important;height:100%;width:100%" id="bigpic">772 <img src="" alt="" style="height: 45%;width: 98%;margin-top:50%;border-radius: 4px;opacity: 1;">773 </div>774 775 </body>776 <script type="text/javascript" src="../script/api.js"></script>777 <script type="text/javascript" src="../script/jquery.min.js"></script>778 <script type="text/javascript" src="../script/mui.min.js"></script>779 <!-- <script type="text/javascript" src="../script/picUp.js"></script> -->780 <script>781 apiready = function() {782 upnames = api.pageParam.upname;783 console.log(JSON.stringify(upnames));784 zsreceive();785 };786 //第一787 var jkht,jkhtVideo,jkjjxy,jkjjxyVideo;788 //第二789 var qczlht, dbh, smcls, zfsms, bxwsxgzs, jt;790 //第三页791 var sddzqrs, zzjt, cljjd, myhkxxb, wtsksqs, scsfzz;792 //第四页793 var cl_cqtps, cl_chtps, cl_cztps, cl_cytps, cl_fdjs, cl_tcs, cl_zks, cl_ybps, cl_mps, cl_cjhs, cl_hbxs, gcfp, gzsfp;794 //第五页795 var xsz, cqzh, cysh, bd, gpsdwjt, rchyzp, sxzl;796 //数组797 var jkhtArr = [];798 var jkjjxyArr = [];799 800 var qczlhtArr = [];801 var dbhArr = [];802 var smclsArr = [];803 var zfsmsArr = [];804 805 var sddzqrsArr = [];806 var zzjtArr = [];807 var cljjdArr = [];808 809 var gcfpArr = [];810 var gzsfpArr = [];811 812 var xszArr = [];813 var cqzhArr = [];814 var cyshArr = [];815 var bdArr = [];816 var gpsdwjtArr = [];817 var rchyzpArr = [];818 819 var cl_cqtpArr, cl_chtpArr, cl_cztpArr, cl_cytpArr, cl_fdjArr, cl_tcArr, cl_zkArr, cl_ybpArr, cl_mpArr, cl_cjhArr, cl_hbxArr;820 821 var vid,noUrl;822 823 var jkhtVideoArr = [];824 var jkjjxyVideoArr = [];825 826 827 //读取图片、视频信息828 function zsreceive() {829 api.ajax({830 url: 'http://XXXXXX/index/repay/getRepayData',831 method: 'post',832 data: {833 values: {834 order_id: upnames835 }836 }837 }, function(ret, err) {838 if (ret) {839 // console.log( JSON.stringify( ret ) );840 //-----------------------------------------第一页841 //借款合同842 jkht = ret.data.loan_contract_img;843 add_zsreceive(jkht, "jkhttest", 0, "jkht");844 //借款合同视频 jkhtVideo_test845 jkhtVideo = ret.data.loan_contract_video;846 console.log(jkhtVideo);847 if (jkhtVideo.length != 0) {848 play_video(jkhtVideo,'jkhtVideo_test');849 }850 //借款居间协议851 jkjjxy = ret.data.loan_agreement_img;852 add_zsreceive(jkjjxy, "jkjjxytest", 0, "jkjjxy");853 //借款居间协议视频854 jkjjxyVideo = ret.data.loan_agreement_video;855 console.log(jkjjxyVideo);856 if (jkjjxyVideo.length != 0) {857 play_video(jkjjxyVideo,'jkjjxyVideo_test');858 }859 //----------------------------------------第二页860 // 汽车租赁合同861 qczlht = ret.data.car_information_contract_img;862 add_zsreceive(qczlht, "qczlhttest", 0, "qczlht");863 //担保函864 dbh = ret.data.letter_guarantee_img;865 add_zsreceive(dbh, "dbhtest", 0, "dbh");866 //说明承诺书867 smcls = ret.data.statement_commitment_img;868 add_zsreceive(smcls, "smclstest", 0, "smcls");869 //转付说明函870 zfsms = ret.data.letter_transfer_img;871 add_zsreceive(zfsms, "zfsmstest", 0, "zfsms");872 //保险未生效告知书873 // bxwsxgzs = ret.data.;874 //借条875 // jt = ret.data.;876 //--------------------------------------第三页877 //送达地址确认书878 sddzqrs = ret.data.address_confirmation_img;879 add_zsreceive(sddzqrs, "sddzqrstest", 0, "sddzqrs");880 //转账截图881 zzjt = ret.data.transfer_screenshot_img;882 add_zsreceive(zzjt, "zzjttest", 0, "zzjt");883 //车辆交接单884 cljjd = ret.data.vehicle_handover;885 add_zsreceive(cljjd, "cljjdtest", 0, "cljjd");886 //每月还款信息表887 myhkxxb = ret.data.permonth_info;888 add_zsreceive(myhkxxb, "myhkxxbtest", 0, "myhkxxb");889 //委托收款授权书890 wtsksqs = ret.data.authorizatio_entrustment;891 add_zsreceive(wtsksqs, "wtsksqstest", 0, "wtsksqs");892 //手持身份证照893 scsfzz = ret.data.hand_idcard_img;894 add_zsreceive(scsfzz, "scsfzztest", 0, "scsfzz");895 //------------------------------------------第四页896 //车辆实拍897 //_车前图片898 cl_cqtps = ret.data.car_condition_front;899 add_zsreceive(cl_cqtps, null, 1, "cl_cqtp");900 //_车后图片901 cl_chtps = ret.data.car_condition_after;902 add_zsreceive(cl_chtps, null, 1, "cl_chtp");903 //_车左图片904 cl_cztps = ret.data.car_condition_left;905 add_zsreceive(cl_cztps, null, 1, "cl_cztp");906 //_车右图片907 cl_cytps = ret.data.car_condition_right;908 add_zsreceive(cl_cytps, null, 1, "cl_cytp");909 //_发动机910 cl_fdjs = ret.data.car_engine;911 add_zsreceive(cl_fdjs, null, 1, "cl_fdj");912 //_天窗913 cl_tcs = ret.data.car_skylight;914 add_zsreceive(cl_tcs, null, 1, "cl_tc");915 //_中控916 cl_zks = ret.data.car_control;917 add_zsreceive(cl_zks, null, 1, "cl_zk");918 //_仪表盘919 cl_ybps = ret.data.car_dashboard;920 add_zsreceive(cl_ybps, null, 1, "cl_ybp");921 //_铭牌922 cl_mps = ret.data.car_nameplate;923 add_zsreceive(cl_mps, null, 1, "cl_mp");924 //_车架号925 cl_cjhs = ret.data.car_number;926 add_zsreceive(cl_cjhs, null, 1, "cl_cjh");927 //_后备箱928 cl_hbxs = ret.data.car_trunk;929 add_zsreceive(cl_hbxs, null, 1, "cl_hbx");930 //购车发票931 gcfp = ret.data.car_purchase_invoice;932 add_zsreceive(gcfp, "gcfptest", 0, "gcfp");933 //购置税发票934 gzsfp = ret.data.purchase_tax_invoice;935 add_zsreceive(gzsfp, "gzsfptest", 0, "gzsfp");936 //--------------------------------------第五页937 //行驶证938 xsz = ret.data.travel_license;939 add_zsreceive(xsz, "xsztest", 0, "xsz");940 //产权证941 cqzh = ret.data.certificate_title_img;942 add_zsreceive(cqzh, "cqzhtest", 0, "cqzh");943 //车钥匙944 cysh = ret.data.car_keys_img;945 add_zsreceive(cysh, "cyshtest", 0, "cysh");946 //2份保单947 bd = ret.data.policy_img;948 add_zsreceive(bd, "bdtest", 0, "bd");949 //GPS定位截图950 gpsdwjt = ret.data.GPS_img;951 add_zsreceive(gpsdwjt, "gpsdwjttest", 0, "gpsdwjt");952 //人车合影照片953 rchyzp = ret.data.photo_man_car_img;954 add_zsreceive(rchyzp, "rchyzptest", 0, "rchyzp");955 //上线资料956 sxzl = ret.data.online_data_img;957 add_zsreceive(sxzl, "sxzltest", 0, "sxzl");958 959 } else {960 console.log(JSON.stringify(err));961 }962 });963 }964 //读取图片信息公用函数965 function add_zsreceive(ids, srcids, num, idname) {966 if (num == 1) {967 for (var i = 0; i < ids.length; i++) {968 $('#' + idname + '').attr('src', ids[i]);969 }970 971 } else {972 var ids_html = '';973 for (var i = 0; i < ids.length; i++) {974 var wipe = ids[i];975 var wipelater = wipe.replace(/http:\/\/[^\/]*/g, "").replace(/\"/g, "");976 // console.log(wipelater);977 ids_html += '<div style="margin:5px;display:block;" class="' + idname + '">' +978 '<img src="' + ids[i] + '" alt="' + wipelater + '" οnclick="enlarge(this);">' +979 '<div οnclick="deletePic(this);" class="tzi" style="color:red;">删除' +980 '</div>' +981 '</div>'982 }983 $('#' + srcids + '').before(ids_html);984 }985 }986 987 //读取视频988 function play_video(video,idname){989 // $('#jkhtVideo_test').hide();990 991 video_html = "";992 for (var i = 0; i < video.length; i++) {993 var vi = video[i];994 vid = vi.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");995 // console.log(vid);996 noUrl = vid.replace(/http:\/\/[^\/]*/g, "");997 video_html+='<div style="margin:5px;" class="'+idname+'">' +998 '<img src="../icon/bf.png" style="padding:15px;" alt="'+noUrl+'" name="'+vid+'" οnclick="play(this,0)">' +999 '<div class="tzi" style="color:red;" οnclick="deletePic(this)">删除' +
1000 '</div>' +
1001 '</div>'
1002 }
1003 // console.log(video_html);
1004 $('#' + idname + '').before(video_html);
1005 }
1006 //播放
1007 function play(thisVid,szi){
1008 if (szi == 0) {
1009 var thVideo = thisVid.parentNode.firstChild.name;
1010 console.log(thVideo);
1011 api.openVideo({
1012 url: thVideo
1013 });
1014 } else {
1015 //'fs://res/1.mp4'
1016 var thVideo = thisVid.parentNode.firstChild.name;
1017 console.log(thVideo);
1018 api.openVideo({
1019 url: 'fs:/'+thVideo+''
1020 });
1021 // console.log(url);
1022 }
1023
1024 }
1025
1026 //动态添加
1027 function add_video(video,idname,uploadVideo_later){
1028 var vi = JSON.stringify(video);
1029 vid = vi.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1030 console.log(vid);
1031 addVideo_html="";
1032 addVideo_html+='<div style="margin:5px;" class="'+idname+'">' +
1033 '<img src="../icon/bf.png" style="padding:15px;" alt="' + uploadVideo_later + '" name="'+vid+'" οnclick="play(this,1)">' +
1034 '<div class="tzi" style="color:red;" οnclick="deletePic(this)">删除' +
1035 '</div>' +
1036 '</div>'
1037 // console.log(addVideo_html);
1038 $('#' + idname + '').before(addVideo_html);
1039 api.toast({
1040 msg: '正在加载~',
1041 location :'middle'
1042 });
1043 }
1044
1045
1046 //点击图片放大
1047 function enlarge(everPic, idname) {
1048 // alert('点击放大')
1049 var pics = (everPic.parentNode.firstChild.src) || ($('#' + idname + '').attr('src'));
1050 console.log(pics);
1051 $('#bigpic').show();
1052 $('.z').hide();
1053 $('#bigpic img').attr('src', pics);
1054 }
1055 $(function() {
1056 $('#bigpic').click(function() {
1057 $('#bigpic').hide();
1058 $('.z').show();
1059 })
1060 })
1061
1062 //删除图片
1063 function deletePic(ever) {
1064 ever.parentNode.parentNode.removeChild(ever.parentNode);
1065 }
1066
1067 //底部选择弹框
1068 function zsadd(idname_id, dynamic, valu, idname, nu) {
1069 api.actionSheet({
1070 cancelTitle: '取消',
1071 buttons: ['拍照', '手机相册', '视频']
1072 }, function(ret, err) {
1073 index = ret.buttonIndex;
1074 // console.log(JSON.stringify(index));
1075 if (ret) {
1076 // console.log( JSON.stringify( ret ) );
1077 if (index == 1) {
1078 //拍照
1079 api.getPicture({
1080 sourceType: 'camera',
1081 encodingType: 'jpg',
1082 mediaValue: 'pic',
1083 destinationType: 'url',
1084 allowEdit: false,
1085 quality: 100,
1086 saveToPhotoAlbum: false
1087 }, function(ret1, err) {
1088 if (ret1) {
1089 // alert(JSON.stringify(ret));
1090 if (ret1) {
1091 img_pic1 = ret1.data;
1092 console.log(JSON.stringify(img_pic1));
1093 if (nu == 1) {
1094 if (img_pic1) {
1095 $('#' + idname + '').attr('src', img_pic1);
1096 uploadPic(null, img_pic1, idname, nu);
1097 }
1098 } else {
1099 if (img_pic1) {
1100 uploadPic(idname_id, img_pic1, idname);
1101 }
1102 }
1103
1104 } else {
1105 api.toast({
1106 msg: '图像获取失败',
1107 duration: 3000,
1108 location: 'bottom'
1109 });
1110 }
1111 } else {
1112 console.log(JSON.stringify(err));
1113 }
1114 });
1115 }
1116 else if (index == 2) {
1117 //手机相册
1118 api.getPicture({
1119 sourceType: 'library',
1120 encodingType: 'png',
1121 mediaValue: 'pic',
1122 destinationType: 'url',
1123 allowEdit: true,
1124 quality: 100,
1125 preview: true,
1126 saveToPhotoAlbum: false
1127 }, function(ret2, err) {
1128 if (ret2) {
1129 // console.log(JSON.stringify(ret2));
1130 // --------------------------------------------------------
1131 img_pic1 = ret2.data;
1132 console.log(JSON.stringify(img_pic1));
1133 if (nu == 1) {
1134 if (img_pic1) {
1135 $('#' + idname + '').attr('src', img_pic1);
1136 uploadPic(null, img_pic1, idname, nu);
1137 }
1138 } else {
1139 if (img_pic1) {
1140 uploadPic(idname_id, img_pic1, idname);
1141 }
1142 }
1143 } else {
1144 console.log(JSON.stringify(err));
1145 }
1146 });
1147 }
1148 else if (index == 3) {
1149 //视频
1150 api.getPicture({
1151 sourceType: 'camera',
1152 // encodingType: 'mp4',
1153 mediaValue: 'video',
1154 videoQuality: 'medium',
1155 saveToPhotoAlbum: true,
1156 destinationType: 'url'
1157 }, function(ret3, err) {
1158 if (ret3) {
1159 //console.log(JSON.stringify(ret));
1160 video_vi = ret3.data;
1161 console.log(JSON.stringify(video_vi));
1162 // --------------------------------------------
1163 // add_video(video_vi,idname)
1164 if (video_vi) {
1165 uploadVideo(video_vi,idname)
1166 }
1167 } else {
1168 console.log(JSON.stringify(err));
1169 }
1170 });
1171 }
1172 } else {
1173 console.log(JSON.stringify(err));
1174 }
1175 });
1176 }
1177
1178 //上传视频
1179 function uploadVideo(video_vi,idname){
1180 api.ajax({
1181 url: 'http://XXXXX/index/system/uploadVideo',
1182 method: 'post',
1183 data: {
1184 files: {
1185 video: video_vi
1186 }
1187 }
1188 },function(ret, err){
1189 if (ret) {
1190 // console.log( JSON.stringify( ret ) );
1191 var uploadVideo_later = ret.data
1192 // console.log(uploadVideo_later);
1193 // $('.'+idname+'').attr('src',uploadVideo_later)
1194 add_video(video_vi,idname,uploadVideo_later);
1195 } else {
1196 console.log( JSON.stringify( err ) );
1197 }
1198 });
1199
1200 }
1201
1202 //上传图片
1203 function uploadPic(idname_id, img_pic1, idname, nu) {
1204 api.ajax({
1205 url: 'http://XXXX/index/system/uploadImg',
1206 method: 'post',
1207 data: {
1208 files: {
1209 image: img_pic1
1210 }
1211 }
1212 }, function(ret, err) {
1213 if (ret) {
1214 // console.log(JSON.stringify(ret));
1215 var change = ret.data
1216 if (nu == 1) {
1217 $('#' + idname + '').attr('alt', change);
1218 } else {
1219 addhtml(idname_id, img_pic1, idname, change);
1220 }
1221 } else {
1222 console.log(JSON.stringify(err));
1223 }
1224 });
1225
1226 }
1227
1228 //动态添加公用函数
1229 function addhtml(idname_id, dynamic, idname, change) {
1230 var dongtai_html = '';
1231 dongtai_html += '<div style="margin:5px;display:block;" class="' + idname + '">' +
1232 '<img οnclick="enlarge(this);" src="' + dynamic + '" alt="' + change + '">' +
1233 '<div class="tzi" οnclick="deletePic(this);" style="color:red;">删除' +
1234 '</div>' +
1235 '</div>'
1236 $('#' + idname_id + '').before(dongtai_html);
1237 }
1238
1239 //点击方框
1240 //----------------------------第一页
1241 //借款合同
1242 $('#jkht').on('click', function() {
1243 var jkhtid = "jkhttest";
1244 zsadd(jkhtid, 'a', null, 'jkht');
1245 })
1246 //借款合同视频
1247 $('#jkhtVideo').on('click',function(){
1248 zsadd(null, null, null,'jkhtVideo_test', null)
1249 })
1250 //借款居间协议 jkjjxyVideo
1251 $('#jkjjxy').on('click', function() {
1252 var jkjjxyid = "jkjjxytest";
1253 zsadd(jkjjxyid, 'c', null, 'jkjjxy');
1254 })
1255 //借款居间协议视频
1256 $('#jkjjxyVideo').on('click',function(){
1257 zsadd(null, null, null,'jkjjxyVideo_test', null)
1258 })
1259 //--------------------------------第二页
1260 //汽车租赁合同
1261 $('#qczlht').on('click', function() {
1262 var qczlhtid = "qczlhttest";
1263 zsadd(qczlhtid, 'e', null, 'qczlht');
1264 })
1265 //担保函
1266 $('#dbh').on('click', function() {
1267 var dbhid = "dbhtest";
1268 zsadd(dbhid, 'f', null, 'dbh');
1269 })
1270 //说明承诺函
1271 $('#smcls').on('click', function() {
1272 var smclsid = "smclstest";
1273 zsadd(smclsid, 'g', null, 'smcls');
1274 })
1275 //转付说明函
1276 $('#zfsms').on('click', function() {
1277 var zfsmsid = "zfsmstest";
1278 zsadd(zfsmsid, 'h', null, 'zfsms');
1279 })
1280 //保险未生效告知书
1281 // $('#bxwsxgzs').on('click', function() {
1282 // var bxwsxgzsid = "bxwsxgzstest";
1283 // zsadd(bxwsxgzsid, 'i');
1284 // })
1285 //借条
1286 // $('#jt').on('click', function() {
1287 // var jtid = "jkhttest";
1288 // zsadd(jtid, 'j');
1289 // })
1290 //---------------------------------第三页
1291 //送达地址确认书
1292 $('#sddzqrs').on('click', function() {
1293 var sddzqrsid = "sddzqrstest"
1294 zsadd(sddzqrsid, 'k', null, 'sddzqrs');
1295 })
1296
1297 //转账截图
1298 $('#zzjt').on('click', function() {
1299 var zzjtid = "zzjttest";
1300 zsadd(zzjtid, 'l', null, 'zzjt');
1301 })
1302
1303 //车辆交接单
1304 $('#cljjd').on('click', function() {
1305 var cljjdid = "cljjdtest";
1306 zsadd(cljjdid, 'm', null, 'cljjd');
1307 })
1308
1309 //每月还款信息表
1310 // $('#myhkxxb').on('click', function() {
1311 // var myhkxxbid = "myhkxxbtest";
1312 // zsadd(myhkxxbid, 'n');
1313 // })
1314
1315 //委托收款授权书
1316 // $('#wtsksqs').on('click', function() {
1317 // var wtsksqsid = "wtsksqstest";
1318 // zsadd(wtsksqsid, 'o');
1319 // })
1320
1321 //手持身份证照
1322 // $('#scsfzz').on('click', function() {
1323 // var scsfzzid = "scsfzztest";
1324 // zsadd(scsfzzid, 'p');
1325 // })
1326 //--------------------------第四页
1327 //购车发票
1328 $('#gcfp').on('click', function() {
1329 var gcfpid = "gcfptest";
1330 zsadd(gcfpid, 'ab', null, 'gcfp');
1331 })
1332
1333 //购置税发票
1334 $('#gzsfp').on('click', function() {
1335 var gzsfpid = "gzsfptest";
1336 zsadd(gzsfpid, 'ac', null, 'gzsfp');
1337 })
1338
1339 //-------------------------第五页
1340 //行驶证
1341 $('#xsz').on('click', function() {
1342 var xsz_zmid = "xsztest";
1343 zsadd(xsz_zmid, 'ad', null, 'xsz');
1344 })
1345 //产权证
1346 $('#cqzh').on('click', function() {
1347 var cqzhid = "cqzhtest";
1348 zsadd(cqzhid, 'af', null, 'cqzh');
1349 })
1350 //车钥匙
1351 $('#cysh').on('click', function() {
1352 var cyshid = "cyshtest";
1353 zsadd(cyshid, 'ag', null, 'cysh');
1354 })
1355 //保单
1356 $('#bd').on('click', function() {
1357 var bd_firid = "bdtest";
1358 zsadd(bd_firid, 'ah', null, 'bd');
1359 })
1360 //GPS定位截图
1361 $('#gpsdwjt').on('click', function() {
1362 var gpsdwjtid = "gpsdwjttest";
1363 zsadd(gpsdwjtid, 'aj', null, 'gpsdwjt');
1364 })
1365 //人车合影照片
1366 $('#rchyzp').on('click', function() {
1367 var rchyzpid = "rchyzptest";
1368 zsadd(rchyzpid, 'ak', null, 'rchyzp');
1369 })
1370 //上线资料
1371 // $('#sxzl').on('click', function() {
1372 // var sxzlid = "sxzltest";
1373 // zsadd(sxzlid, 'al');
1374 // })
1375
1376 //点击获取本页的图片地址
1377 function getPic(idname, idArr) {
1378 var allPic = document.querySelectorAll("." + idname + "");
1379 idArr.length = 0;
1380 // console.log(allPic.length);
1381 for (var i = 0; i < allPic.length; i++) {
1382 // var loopPic = allPic[i].firstChild.src;
1383 var changePic = allPic[i].firstChild.alt
1384 idArr.push(changePic)
1385 // console.log(changePic);
1386 }
1387 }
1388 //获取本页视频地址
1389 function getVideo(idname, idVideoArr){
1390 console.log(idname);
1391 var allVideo = document.querySelectorAll("." + idname + "");
1392 console.log(allVideo.length);
1393 idVideoArr.length = 0;
1394 for (var i = 0; i < allVideo.length; i++) {
1395 var changeVideo = allVideo[i].firstChild.alt;
1396 console.log(changeVideo);
1397 idVideoArr.push(changeVideo)
1398 }
1399 }
1400
1401 // 第一页
1402 $('.next1').on('click', function() {
1403
1404 var dialogBox = api.require('dialogBox');
1405 dialogBox.alert({
1406 texts: {
1407 title: '提示',
1408 content: '您确定本页文件已上传完成吗？',
1409 leftBtnTitle: '取消',
1410 rightBtnTitle: '确认'
1411 },
1412 styles: {
1413 bg: '#fff',
1414 w: 300,
1415 corner: 2,
1416 title: {
1417 marginT: 20,
1418 icon: 'widget://res/gou.png',
1419 iconSize: 40,
1420 titleSize: 22,
1421 titleColor: '#000'
1422 },
1423 content: {
1424 color: '#000',
1425 size: 16
1426 },
1427 left: {
1428 marginB: 7,
1429 marginL: 20,
1430 w: 130,
1431 h: 35,
1432 corner: 2,
1433 bg: '#fff',
1434 color: '#F3544E',
1435 size: 14
1436 },
1437 right: {
1438 marginB: 7,
1439 marginL: 10,
1440 w: 130,
1441 h: 35,
1442 corner: 2,
1443 bg: '#fff',
1444 color: '#F3544E',
1445 size: 14
1446 }
1447 }
1448 }, function(ret) {
1449
1450 if (ret.eventType == 'left') {
1451 //取消
1452 var dialogBox = api.require('dialogBox');
1453 dialogBox.close({
1454 dialogName: 'alert'
1455 });
1456 } else if (ret.eventType == 'right') {
1457 //确定
1458 var dialogBox = api.require('dialogBox');
1459 dialogBox.close({
1460 dialogName: 'alert'
1461 });
1462 $('.hid').hide();
1463 $('.secondchild').show();
1464 $(window).scrollTop(0);
1465 getPic("jkht", jkhtArr);
1466
1467 getVideo("jkhtVideo_test", jkhtVideoArr);
1468
1469 getVideo("jkjjxyVideo_test", jkjjxyVideoArr);
1470
1471 getPic("jkjjxy", jkjjxyArr);
1472
1473 }
1474
1475 });
1476
1477 })
1478
1479 // 第二页
1480 $('.top2').on('click', function() {
1481 $('.hid').hide();
1482 $('.firstchild').show();
1483 $(window).scrollTop(0);
1484 })
1485
1486 $('.next2').on('click', function() {
1487
1488 var dialogBox = api.require('dialogBox');
1489 dialogBox.alert({
1490 texts: {
1491 title: '提示',
1492 content: '您确定本页文件已上传完成吗？',
1493 leftBtnTitle: '取消',
1494 rightBtnTitle: '确认'
1495 },
1496 styles: {
1497 bg: '#fff',
1498 w: 300,
1499 corner: 2,
1500 title: {
1501 marginT: 20,
1502 icon: 'widget://res/gou.png',
1503 iconSize: 40,
1504 titleSize: 22,
1505 titleColor: '#000'
1506 },
1507 content: {
1508 color: '#000',
1509 size: 16
1510 },
1511 left: {
1512 marginB: 7,
1513 marginL: 20,
1514 w: 130,
1515 h: 35,
1516 corner: 2,
1517 bg: '#fff',
1518 color: '#F3544E',
1519 size: 14
1520 },
1521 right: {
1522 marginB: 7,
1523 marginL: 10,
1524 w: 130,
1525 h: 35,
1526 corner: 2,
1527 bg: '#fff',
1528 color: '#F3544E',
1529 size: 14
1530 }
1531 }
1532 }, function(ret) {
1533
1534 if (ret.eventType == 'left') {
1535 //取消
1536 var dialogBox = api.require('dialogBox');
1537 dialogBox.close({
1538 dialogName: 'alert'
1539 });
1540 } else if (ret.eventType == 'right') {
1541 //确定
1542 var dialogBox = api.require('dialogBox');
1543 dialogBox.close({
1544 dialogName: 'alert'
1545 });
1546 $('.hid').hide();
1547 $('.thirdchild').show();
1548 $(window).scrollTop(0);
1549
1550 getPic("qczlht", qczlhtArr);
1551 getPic("dbh", dbhArr);
1552 getPic("smcls", smclsArr);
1553 getPic("zfsms", zfsmsArr);
1554
1555 }
1556
1557 });
1558
1559 })
1560
1561 // 第三页
1562 $('.top3').on('click', function() {
1563 $('.hid').hide();
1564 $('.secondchild').show();
1565 $(window).scrollTop(0);
1566 })
1567
1568 $('.next3').on('click', function() {
1569 var dialogBox = api.require('dialogBox');
1570 dialogBox.alert({
1571 texts: {
1572 title: '提示',
1573 content: '您确定本页文件已上传完成吗？',
1574 leftBtnTitle: '取消',
1575 rightBtnTitle: '确认'
1576 },
1577 styles: {
1578 bg: '#fff',
1579 w: 300,
1580 corner: 2,
1581 title: {
1582 marginT: 20,
1583 icon: 'widget://res/gou.png',
1584 iconSize: 40,
1585 titleSize: 22,
1586 titleColor: '#000'
1587 },
1588 content: {
1589 color: '#000',
1590 size: 16
1591 },
1592 left: {
1593 marginB: 7,
1594 marginL: 20,
1595 w: 130,
1596 h: 35,
1597 corner: 2,
1598 bg: '#fff',
1599 color: '#F3544E',
1600 size: 14
1601 },
1602 right: {
1603 marginB: 7,
1604 marginL: 10,
1605 w: 130,
1606 h: 35,
1607 corner: 2,
1608 bg: '#fff',
1609 color: '#F3544E',
1610 size: 14
1611 }
1612 }
1613 }, function(ret) {
1614
1615 if (ret.eventType == 'left') {
1616 //取消
1617 var dialogBox = api.require('dialogBox');
1618 dialogBox.close({
1619 dialogName: 'alert'
1620 });
1621 } else if (ret.eventType == 'right') {
1622 //确定
1623 var dialogBox = api.require('dialogBox');
1624 dialogBox.close({
1625 dialogName: 'alert'
1626 });
1627 $('.hid').hide();
1628 $('.fourthchild').show();
1629 $(window).scrollTop(0);
1630
1631 getPic("sddzqrs", sddzqrsArr);
1632 getPic("zzjt", zzjtArr);
1633 getPic("cljjd", cljjdArr);
1634 }
1635
1636 });
1637
1638 })
1639
1640 // 第四页
1641 $('.top4').on('click', function() {
1642 $('.hid').hide();
1643 $('.thirdchild').show();
1644 $(window).scrollTop(0);
1645 })
1646
1647 $('.next4').on('click', function() {
1648 var dialogBox = api.require('dialogBox');
1649 dialogBox.alert({
1650 texts: {
1651 title: '提示',
1652 content: '您确定本页文件已上传完成吗？',
1653 leftBtnTitle: '取消',
1654 rightBtnTitle: '确认'
1655 },
1656 styles: {
1657 bg: '#fff',
1658 w: 300,
1659 corner: 2,
1660 title: {
1661 marginT: 20,
1662 icon: 'widget://res/gou.png',
1663 iconSize: 40,
1664 titleSize: 22,
1665 titleColor: '#000'
1666 },
1667 content: {
1668 color: '#000',
1669 size: 16
1670 },
1671 left: {
1672 marginB: 7,
1673 marginL: 20,
1674 w: 130,
1675 h: 35,
1676 corner: 2,
1677 bg: '#fff',
1678 color: '#F3544E',
1679 size: 14
1680 },
1681 right: {
1682 marginB: 7,
1683 marginL: 10,
1684 w: 130,
1685 h: 35,
1686 corner: 2,
1687 bg: '#fff',
1688 color: '#F3544E',
1689 size: 14
1690 }
1691 }
1692 }, function(ret) {
1693
1694 if (ret.eventType == 'left') {
1695 //取消
1696 var dialogBox = api.require('dialogBox');
1697 dialogBox.close({
1698 dialogName: 'alert'
1699 });
1700 } else if (ret.eventType == 'right') {
1701 //确定
1702 var dialogBox = api.require('dialogBox');
1703 dialogBox.close({
1704 dialogName: 'alert'
1705 });
1706 $('.hid').hide();
1707 $('.fifthchild').show();
1708 $(window).scrollTop(0);
1709
1710 getPic("gcfp", gcfpArr);
1711 getPic("gzsfp", gzsfpArr);
1712 cl_cqtpArr = $('#cl_cqtp').attr('alt');
1713 cl_chtpArr = $('#cl_chtp').attr('alt');
1714 cl_cztpArr = $('#cl_cztp').attr('alt');
1715
1716 cl_cytpArr = $('#cl_cytp').attr('alt');
1717 cl_fdjArr = $('#cl_fdj').attr('alt');
1718 cl_tcArr = $('#cl_tc').attr('alt');
1719
1720 cl_zkArr = $('#cl_zk').attr('alt');
1721 cl_ybpArr = $('#cl_ybp').attr('alt');
1722 cl_mpArr = $('#cl_mp').attr('alt');
1723
1724 cl_cjhArr = $('#cl_cjh').attr('alt');
1725 cl_hbxArr = $('#cl_hbx').attr('alt');
1726
1727 }
1728
1729 });
1730
1731 })
1732
1733 // 第五页
1734 $('.top5').on('click', function() {
1735 $('.hid').hide();
1736 $('.fourthchild').show();
1737 $(window).scrollTop(0);
1738 })
1739
1740 $('.next5').on('click', function() {
1741 var dialogBox = api.require('dialogBox');
1742 dialogBox.alert({
1743 texts: {
1744 title: '提示',
1745 content: '您确定提交所有内容吗？',
1746 leftBtnTitle: '取消',
1747 rightBtnTitle: '确认'
1748 },
1749 styles: {
1750 bg: '#fff',
1751 w: 300,
1752 corner: 2,
1753 title: {
1754 marginT: 20,
1755 icon: 'widget://res/gou.png',
1756 iconSize: 40,
1757 titleSize: 22,
1758 titleColor: '#000'
1759 },
1760 content: {
1761 color: '#000',
1762 size: 16
1763 },
1764 left: {
1765 marginB: 7,
1766 marginL: 20,
1767 w: 130,
1768 h: 35,
1769 corner: 2,
1770 bg: '#fff',
1771 color: '#F3544E',
1772 size: 14
1773 },
1774 right: {
1775 marginB: 7,
1776 marginL: 10,
1777 w: 130,
1778 h: 35,
1779 corner: 2,
1780 bg: '#fff',
1781 color: '#F3544E',
1782 size: 14
1783 }
1784 }
1785 }, function(ret) {
1786 if (ret.eventType == 'left') {
1787 //取消
1788 var dialogBox = api.require('dialogBox');
1789 dialogBox.close({
1790 dialogName: 'alert'
1791 });
1792 } else if (ret.eventType == 'right') {
1793 //确定
1794 var dialogBox = api.require('dialogBox');
1795 dialogBox.close({
1796 dialogName: 'alert'
1797 });
1798
1799 getPic("xsz", xszArr);
1800 getPic("cqzh", cqzhArr);
1801 getPic("cysh", cyshArr);
1802 getPic("bd", bdArr);
1803 getPic("gpsdwjt", gpsdwjtArr);
1804 getPic("rchyzp", rchyzpArr);
1805
1806 var jkhtArr_later = JSON.stringify(jkhtArr);
1807 var jkhtArr_last = jkhtArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1808 var jkhtVideoArr_later = JSON.stringify(jkhtVideoArr);
1809 var jkhtVideoArr_last = jkhtVideoArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1810 console.log(jkhtVideoArr_last);
1811 var jkjjxyArr_later = JSON.stringify(jkjjxyArr)
1812 var jkjjxyArr_last = jkjjxyArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1813 var jkjjxyVideoArr_later = JSON.stringify(jkjjxyVideoArr);
1814 var jkjjxyVideoArr_last = jkjjxyVideoArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1815 console.log(jkjjxyVideoArr_last);
1816
1817 var qczlhtArr_later = JSON.stringify(qczlhtArr)
1818 var qczlhtArr_last = qczlhtArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1819 var dbhArr_later = JSON.stringify(dbhArr)
1820 var dbhArr_last = dbhArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1821 var smclsArr_later = JSON.stringify(smclsArr)
1822 var smclsArr_last = smclsArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1823 var zfsmsArr_later = JSON.stringify(zfsmsArr)
1824 var zfsmsArr_last = zfsmsArr_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1825
1826 var sddzqrs_later = JSON.stringify(sddzqrsArr)
1827 var sddzqrs_last = sddzqrs_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1828 var zzjt_later = JSON.stringify(zzjtArr)
1829 var zzjt_last = zzjt_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1830 var cljjd_later = JSON.stringify(cljjdArr)
1831 var cljjd_last = cljjd_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1832
1833 var gcfp_later = JSON.stringify(gcfpArr)
1834 var gcfp_last = gcfp_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1835 var gzsfp_later = JSON.stringify(gzsfpArr)
1836 var gzsfp_last = gzsfp_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1837
1838 var xsz_later = JSON.stringify(xszArr)
1839 var xsz_last = xsz_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1840 var cqzh_later = JSON.stringify(cqzhArr)
1841 var cqzh_last = cqzh_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1842 var cysh_later = JSON.stringify(cyshArr)
1843 var cysh_last = cysh_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1844 var bd_later = JSON.stringify(bdArr)
1845 var bd_last = bd_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1846 var gpsdwjt_later = JSON.stringify(gpsdwjtArr)
1847 var gpsdwjt_last = gpsdwjt_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1848 var rchyzp_later = JSON.stringify(rchyzpArr)
1849 var rchyzp_last = rchyzp_later.replace(/\"/g, "").replace(/\[/g, "").replace(/\]/g, "");
1850
1851
1852
1853 //提交
1854 api.ajax({
1855 url: 'http://xxxxxxxx/index/repay/dataUpload',
1856 method: 'post',
1857 data: {
1858 values: {
1859 order_id: upnames,
1860 // ---------------------------------------------
1861 //借款合同
1862 loan_contract_img: jkhtArr_last,
1863 //借款合同视频
1864 loan_contract_video: jkhtVideoArr_last,
1865 //借款居间协议
1866 loan_agreement_img: jkjjxyArr_last,
1867 //借款居间视频
1868 loan_agreement_video: jkjjxyVideoArr_last,
1869 //汽车租赁合同
1870 car_information_contract_img: qczlhtArr_last,
1871 //担保函
1872 letter_guarantee_img: dbhArr_last,
1873 //说明承诺函
1874 statement_commitment_img: smclsArr_last,
1875 //转付说明函
1876 letter_transfer_img: zfsmsArr_last,
1877 //保险未生效告知书
1878 //借条
1879 //-----------------------------------------------
1880 //送达地址确认书
1881 address_confirmation_img: sddzqrs_last,
1882 //转账截图
1883 transfer_screenshot_img: zzjt_last,
1884 //车辆交接单
1885 vehicle_handover: cljjd_last,
1886 //每月还款信息表
1887 //委托收款授权书
1888 //手持身份证照
1889 //------------------------------------------------
1890 //车辆资料
1891 //——车前
1892 car_condition_front: cl_cqtpArr,
1893 //——车后
1894 car_condition_after: cl_chtpArr,
1895 //——车左
1896 car_condition_left: cl_cztpArr,
1897 //——车右
1898 car_condition_right: cl_cytpArr,
1899 //发动机
1900 car_engine: cl_fdjArr,
1901 //天窗
1902 car_skylight: cl_tcArr,
1903 //中控
1904 car_control: cl_zkArr,
1905 //仪表盘
1906 car_dashboard: cl_ybpArr,
1907 //铭牌
1908 car_nameplate: cl_mpArr,
1909 //车架号
1910 car_number: cl_cjhArr,
1911 //后备箱
1912 car_trunk: cl_hbxArr,
1913 //购车发票
1914 car_purchase_invoice: gcfp_last,
1915 //购置税发票
1916 purchase_tax_invoice: gzsfp_last,
1917 //----------------------------第五页
1918 //行驶证
1919 travel_license: xsz_last,
1920 //产权证
1921 certificate_title_img: cqzh_last,
1922 //车钥匙
1923 car_keys_img: cysh_last,
1924 //保单
1925 policy_img: bd_last,
1926 //GPS定位截图
1927 GPS_img: gpsdwjt_last,
1928 //人车合影图片
1929 photo_man_car_img: rchyzp_last,
1930 //上线资料
1931
1932 }
1933 }
1934 }, function(ret, err) {
1935 if (ret) {
1936 console.log(JSON.stringify(ret));
1937 api.closeWin({});
1938 } else {
1939 console.log(JSON.stringify(err));
1940 }
1941 });
1942 }
1943 });
1944
1945 })
1946 </script>
1947
1948 </html>
自学apicloud【Apicloud——关于上传图片、视频】相关推荐
- vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
- 系统自学Java语言（学习视频整理）
以下分享的视频教程 99% 来源于B站(哔哩哔哩),其余来自于慕课网,希望这些视频能帮助你系统全面地自学 Java 语言. 目录 一.Java基础 二.数据结构与算法 三.图解Java设计模式 四.J ...
- Java oss 上传图片视频
Util类里的公共参数暂时还做不到动态更新,有大佬有空可以弄一下 package com.test.file.util;import com.aliyun.oss.OSSClient; import ...
- 为何买了专业设备又要卖掉？怎样正确自学拍摄、剪辑做视频？
做自媒体技术和设备哪个更重要? 现在的网络非常发达,有不少内容都可以通过网络进行自学,拍摄.剪辑也可以. 既然有那么多的地方可以自学,那为什么会有那么多的培训机构呢? 大周曾经一度认为只有傻子才会去培 ...
- 自学编程，我该如何寻找自学资源？（含视频）
今天分享的将是非常干的干货! 我们一直在讲自学编程,那么自学编程有什么不一样的地方吗?在我看来,那就是如果你是选择自学的话,那么就意味着很多事情你得一个人去解决. 自己去找资料,自己去安装相应的软件, ...
- vue 项目中使用wangEditor上传图片视频到oos
废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢fro ...
- 自学网的计算机基础视频,我要自学网-为零基础初学者提供计算机知识课程视频教学的自学平台...
我要自学网是一款为零基础初学者提供计算机知识课程视频教学的自学APP,我要自学网APP主要提供的是计算机方面的知识课程,这些课程都是视频教学的,在我要自学网中用户可以学习到很多的计算机知识,APP中提 ...
- html5转apicloud,APICloud app应用转微信公众号教程
概要 现在,APICloud 应用,可以一键生成微信公众号! APICloud 基于积淀已久的 iOS/Android 原生引擎开发技术,结合微信公众号运行环境的特点,针对性地推出了为其量身定制的适配 ...
- java好的学习视频_自学Java看谁的视频比较好
随着互联网的发展,视频教程充斥着网络,很多人为了能够在视频教程中捞取一桶金,纷纷投入视频售卖的大军之中,其中不乏有一些劣质的视频课件让学员受害,今天我们就来看看在Java编程专业中,有什么好的Java ...
- Java自学指南三、入门视频优先
一门编程语言零基础,想要入门与求职,最快的方式是付钱参加培训班.原因很简单: 讲师都是 IT 企业出来的程序员,知道企业需要掌握什么样编程技能的人才 培训课程教了 n 遍,打磨的很适合不同基础的学员 ...
最新文章
- Go 学习笔记（82）— Go 第三方库之 viper（解析配置文件、热更新配置文件）
- 【符号修改】之根据静态库符号以#define的形式重命名
- IIS无法启动——郁闷的KB939373补丁
- 数据源中没有 datarow_Power BI Desktop 中的数据源
- 阿里巴巴大数据运维平台实践
- H264--1--编码原理以及I帧B帧P帧
- IBatisNet初步体验
- [预警]WebSOC多漏洞插件检测 预防勒索病毒“Satan”新变种
- python实现海康sdk二次开发，移动侦测事件（二）
- python爬虫之爬取招聘岗位信息
- 构建自己的GAFATA
- Problem K. Road Network - ACPC2015（求树的直径 dp）
- 【Oracle】plsql连接64位的Oracle
- oracle安装在非图形,非图形化静默安装Oracle 11g
- 定义一个圆类-Circle，在类的内部提供一个属性：半径（r）：同时提供两个方法：计算面积（ getArea() ）和计算周长（ getPerimeter() ）。
- 做企业网管你要懂什么
- 易源数据_易源数据-全国景点查询【最新版】_大数据可视化_数据API_数据应用-云市场-阿里云...
- ASP无限级分类代码
- 前端性能优化-Performance详解
- 在windows和Python2.7下，安装Scapy
热门文章
- 互联网日报 | 5月21日 星期五 | 张一鸣卸任字节跳动CEO；腾讯一季度营收1353亿元；微软宣布明年停止支持IE浏览器...
- 可解释的AI：深入深度学习黑匣子
- 百度关键词分析工具_百度网站关键词快排系统 - 网站被降权的原因分析
- Failed to register bundle identifier. The app identifier “xxx” cannot be registered to your developm
- PAT_乙级1012
- aspose使用合集java（Word、Excel、PPT转PDF）
- ABAQUS 2020 license冲突解决
- SHOGUN toolbox的一些使用心得
- 计算机在生物工程中的应用 华中农业大学,虫害防治技术
- UE5 QRCode插件使用