Apicloud——关于上传图片、视频
2024-06-11 17:51:51
相当低劣的一篇整理，简直非人类，继整理了第二篇关于上传图片与视屏；
最近项目最后，需要一个上传图片和视频的功能，找了一些框架和插件，都不太适用。
自己根据需要写了一个
需求：
读取已有图片实现预览——》实现点击方框动态添加多图，删除，实现预览——》提交，实现图片修改
效果图：
代码：
现有问题，写到现在的几篇，其中发的代码都太长了，主要是太懒了没有二次整理，这篇以后就不这样了，
因为发现我回头再看代码的时候，自己都觉得乱，毕竟把它写下来就是为了方便二次记忆学习的，现在这样已经不对了。
今天这个是最长的。
写的比较惨，其中改了好多次，其实上传最终也是对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: 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 + '" ο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>转载于:https://www.cnblogs.com/jry199506/p/10341179.html
Apicloud——关于上传图片、视频相关推荐
- vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
- 自学apicloud【Apicloud——关于上传图片、视频】
自己根据需要写了一个 需求: 读取已有图片实现预览-->实现点击方框动态添加多图,删除,实现预览-->提交,实现图片修改 效果图: 代码: 现有问题,写到现在的几篇,其中发的代码都太长了, ...
- Java oss 上传图片视频
Util类里的公共参数暂时还做不到动态更新,有大佬有空可以弄一下 package com.test.file.util;import com.aliyun.oss.OSSClient; import ...
- vue 项目中使用wangEditor上传图片视频到oos
废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢fro ...
- 阿里云上传图片视频基本步骤
1.获取accesskey secret凭证,初始配置,然后建立连接 2.上传文件,或是转成流的方式,或者本地上传视频,或者网络视频,总之可以根据sdk方法形参配置好要发送的内容 3.通过发送接口发送 ...
- 富文本编辑器使用 ( 手动上传图片视频 动态插入到标签中 )
安装依赖 npm install vue-quill-editor -s npm install quill-image-resize-module -s 然后全局引入 import VueQuill ...
- pythonselenium上传图片视频_如何用selenium、python上传文件（图片）
我添加了一个答案,任何人想使用处理恼人的msofiledialogs.这是对saravanan提出的解决方案的改进,但对Python来说更加充实. 我也遇到过类似的问题,我正在为一家公司做脚本.我试图 ...
- wangeditor使用方法，上传图片/视频到七牛云
官方首页:https://www.wangeditor.com/ 官方文档:https://www.wangeditor.com/doc/ 基本使用 使用方式 下载 可以使用npm安装也可以使用CDN ...
- Minio服务器上传图片视频访问不了
浏览器打开没有权限: This XML file does not appear to have any style information associated with it. The docum ...
最新文章
- 机器学习基础专题：评估指标
- 手机休眠监测wifi
- STM32L0系列串口重定义的方法
- OpenCV简介及图像处理示例教程
- a java runtime envi_认识java
- 中新赛克数据可视化_中新赛克——能否构建更安全的世界
- include php 失效,为什么include(‘php：// input’)不起作用？
- Django从理论到实战(part30)--Meta配置
- 数学在计算机科学上的应用文献,浅谈数学在计算机科学及应用中的作用
- cocos2d-x游戏开发系列教程-中国象棋02-main函数和欢迎页面
- 图片操作案例：python 批量更改图像尺寸到统一大小的方法
- 自动驾驶车辆转向控制（通过支持转角控制的EPS实现角速度控制）
- eureka 之前的服务如何关闭_Eureka 中的幽灵
- 如果这样 你跟小三走吧
- CSS框架学习资料汇总
- c语言算除法并转百分比,【转】C语言除法运算符“/”和求余运算符“%”
- 用两个栈实现一个队列用两个队列实现一个栈
- Python运算(五)统计statistic模块
- Linux之禅道安装
- java校内报纸实验报告_第六周Java实验报告四