zoukankan html css js c++ java
Apicloud——关于上传图片、视频

相当低劣的一篇整理，简直非人类，继整理了第二篇关于上传图片与视屏；
最近项目最后，需要一个上传图片和视频的功能，找了一些框架和插件，都不太适用。
自己根据需要写了一个
需求：
读取已有图片实现预览——》实现点击方框动态添加多图，删除，实现预览——》提交，实现图片修改
效果图：
代码：
现有问题，写到现在的几篇，其中发的代码都太长了，主要是太懒了没有二次整理，这篇以后就不这样了，
因为发现我回头再看代码的时候，自己都觉得乱，毕竟把它写下来就是为了方便二次记忆学习的，现在这样已经不对了。
今天这个是最长的。
写的比较惨，其中改了好多次，其实上传最终也是对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              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              100%;
  40             border-top: 1px solid #c9c9c9;
  41             margin-bottom: 5px;
  42         }
  43 
  44         .z img {
  45             height: 106px;
  46              106px;
  47             border: 1px dashed #c9c9c9;
  48             border-radius: 6px;
  49         }
  50 
  51         video {
  52             height: 170px;
  53              200px;
  54         }
  55 
  56         #xyvideo {
  57             height: 170px;
  58              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              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              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              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="100%;height:60px;display:flex;justify-content:space-around;align-items:center;">
 148             <div class="buy_car_arrowl" onclick="api.closeWin()"></div>
 149             <div style="height:100%;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="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="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="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="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="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="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 onclick="enlarge(this,'cl_cqtp');">
 470                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 471                                 </div>
 472                                 <img src="../icon/zxj.png" alt="" id="cl_cqtp" onclick="zsadd(null, null, null, 'cl_cqtp',1)">
 473                                 <div class="tzi">
 474                                     车前图片
 475                                 </div>
 476                             </div>
 477                             <div style="margin:5px;">
 478                                 <div onclick="enlarge(this,'cl_chtp');">
 479                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 480                                 </div>
 481                                 <img src="../icon/zxj.png" alt="" id="cl_chtp" onclick="zsadd(null, null, null, 'cl_chtp',1)">
 482                                 <div class="tzi">
 483                                     车后图片
 484                                 </div>
 485                             </div>
 486                             <div style="margin:5px;">
 487                                 <div onclick="enlarge(this,'cl_cztp');">
 488                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 489                                 </div>
 490                                 <img src="../icon/zxj.png" alt="" id="cl_cztp" onclick="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 onclick="enlarge(this,'cl_cytp');">
 503                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 504                                 </div>
 505                                 <img src="../icon/zxj.png" alt="" id="cl_cytp" onclick="zsadd(null, null, null, 'cl_cytp',1)">
 506                                 <div class="tzi">
 507                                     车右图片
 508                                 </div>
 509                             </div>
 510                             <div style="margin:5px;">
 511                                 <div onclick="enlarge(this,'cl_fdj');">
 512                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 513                                 </div>
 514                                 <img src="../icon/zxj.png" alt="" id="cl_fdj" onclick="zsadd(null, null, null, 'cl_fdj',1)">
 515                                 <div class="tzi">
 516                                     发动机
 517                                 </div>
 518                             </div>
 519                             <div style="margin:5px;">
 520                                 <div onclick="enlarge(this,'cl_tc');">
 521                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 522                                 </div>
 523                                 <img src="../icon/zxj.png" alt="" id="cl_tc" onclick="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 onclick="enlarge(this,'cl_zk');">
 536                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 537                                 </div>
 538                                 <img src="../icon/zxj.png" alt="" id="cl_zk" onclick="zsadd(null, null, null, 'cl_zk',1)">
 539                                 <div class="tzi">
 540                                     中控
 541                                 </div>
 542                             </div>
 543                             <div style="margin:5px;">
 544                                 <div onclick="enlarge(this,'cl_ybp');">
 545                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 546                                 </div>
 547                                 <img src="../icon/zxj.png" alt="" id="cl_ybp" onclick="zsadd(null, null, null, 'cl_ybp',1)">
 548                                 <div class="tzi">
 549                                     仪表盘
 550                                 </div>
 551                             </div>
 552                             <div style="margin:5px;">
 553                                 <div onclick="enlarge(this,'cl_mp');">
 554                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 555                                 </div>
 556                                 <img src="../icon/zxj.png" alt="" id="cl_mp" onclick="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 onclick="enlarge(this,'cl_cjh');">
 569                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 570                                 </div>
 571                                 <img src="../icon/zxj.png" alt="" id="cl_cjh" onclick="zsadd(null, null, null, 'cl_cjh',1)">
 572                                 <div class="tzi">
 573                                     车架号
 574                                 </div>
 575                             </div>
 576                             <div style="margin:5px;">
 577                                 <div onclick="enlarge(this,'cl_hbx');">
 578                                     <img src="../icon/bigbig.png" alt="" style="background-color:black;opacity:0.6;height:25px;25px;border:none;position: absolute;float:left;">
 579                                 </div>
 580                                 <img src="../icon/zxj.png" alt="" id="cl_hbx" onclick="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="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="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="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="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%;100%" id="bigpic">
 772         <img src="" alt="" style="height: 45%; 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: upnames
 835                 }
 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_test
 845                 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 + '" onclick="enlarge(this);">' +
 979                     '<div onclick="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+'" onclick="play(this,0)">' +
 999           '<div class="tzi" style="color:red;" onclick="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+'" onclick="play(this,1)">' +
1034           '<div class="tzi" style="color:red;" onclick="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 onclick="enlarge(this);" src="' + dynamic + '" alt="' + change + '">' +
1233             '<div class="tzi" onclick="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>
查看全文
相关阅读:
为何在JDK安装路径下存在两个JRE？
awk中printf的使用说明
 awk中printf的使用说明
 awk中printf的使用说明
 修改SecureCRT终端的Home和End功能键。
修改SecureCRT终端的Home和End功能键。
解决mysqldb查询大量数据导致内存使用过高的问题
 Linux 硬盘工具之hdparm
Linux 硬盘工具之hdparm
iostat命令详解
原文地址：https://www.cnblogs.com/jry199506/p/10341179.html