1- <!DOCTYPE html>
2- < html >
3-
4- < head >
5- < meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 " />
6- < meta name ="viewport " content ="width=device-width, initial-scale=1, maximum-scale=1 ">
7- < title > Wear Gallery LAN Transfer</ title >
8- < link rel ="stylesheet " href ="../layui/css/layui.css ">
9-
10- < style >
11- body {
12- margin-bottom : 60px ;
13- }
14-
15- # upload {
16- display : block
17- }
18-
19- .container {
20- padding-top : 60px ;
21- margin-left : 10% ;
22- margin-right : 10% ;
23- }
24-
25- .title {
26- font-size : 40px ;
27- }
28-
29- .layui-upload-drag {
30- margin-top : 40px ;
31- }
32- </ style >
33- </ head >
34-
35- < body >
36-
37- < div class ="container ">
38- < div class ="layui-row layui-col-space15 ">
39- < div class ="title "> Upload</ div >
40- < div > Do not close the server window on your watch during upload.</ div >
41- </ div >
42-
43- < hr >
44-
45- < div class ="layui-upload-drag " id ="upload ">
46- < i class ="layui-icon "> </ i >
47- < p > Click, or drag picture files here.</ p >
48- </ div >
49-
50- < div class ="layui-upload-list ">
51- < table class ="layui-table ">
52- < thead >
53- < tr >
54- < th > File Name</ th >
55- < th > Size</ th >
56- < th > State</ th >
57- </ tr >
58- </ thead >
59- < tbody id ="demoList "> </ tbody >
60- </ table >
61- </ div >
62-
63- < div style ="background-color: #F2F2F2; margin-top: 10%; ">
64- < div class ="layui-card-body " style ="color: rgba(119,136,153,0.8); ">
65- Copyright Ⓒ 2020 < a href ="https://github.com/liangchenhe55/wear-gallery/ "> Wear Gallery</ a > All rights
66- reserved.
67- </ div >
68- </ div >
69- </ div >
70-
71- < script src ="../layui/layui.js "> </ script >
72- < script >
73- layui . use ( 'upload' , function ( ) {
74- var $ = layui . jquery
75- var upload = layui . upload ;
76- var demoListView = $ ( '#demoList' )
77-
78- //执行实例
79- var uploadInst = upload . render ( {
80- elem : '#upload' //绑定元素
81- , url : '/upload' //上传接口
82- , accept : 'images'
83- , field : 'image'
84- , multiple : true
85- , choose : function ( obj ) {
86- //选择文件回调
87- obj . preview ( function ( index , file , result ) {
88- var tr = $ ( [ '<tr id="upload-' + index + '">'
89- , '<td>' + file . name + '</td>'
90- , '<td>' + ( file . size / 1014 ) . toFixed ( 1 ) + 'kb</td>'
91- , '<td>上传中...</td>'
92- , '</tr>' ] . join ( '' ) ) ;
93-
94- demoListView . append ( tr ) ;
95- } ) ;
96- }
97- , before : function ( obj ) {
98-
99- }
100- , done : function ( res , index , upload ) {
101- //上传完毕回调
102- if ( res . code == 0 ) { //上传成功
103- var tr = demoListView . find ( 'tr#upload-' + index )
104- , tds = tr . children ( ) ;
105- tds . eq ( 2 ) . html ( '<span style="color: #5FB878;">Success</span>' ) ;
106- return ;
107- }
108- this . error ( index , upload ) ;
109- }
110- , error : function ( index , upload ) {
111- //请求异常回调
112- var tr = demoListView . find ( 'tr#upload-' + index )
113- , tds = tr . children ( ) ;
114- tds . eq ( 2 ) . html ( '<span style="color: #FF5722;">Error</span>' ) ;
115- }
116- } ) ;
117- } ) ;
118- </ script >
119- </ body >
120-
121- </ html >
1+ <!DOCTYPE html> < html lang =""> < head > < meta charset ="utf-8 "> < meta http-equiv ="X-UA-Compatible " content ="IE=edge "> < meta name ="viewport " content ="width=device-width,initial-scale=1 "> < link rel ="icon " href ="favicon.ico "> < title > wg-upload</ title > < link href ="css/app.93b8a9f2.css " rel ="preload " as ="style "> < link href ="css/chunk-vendors.7464670d.css " rel ="preload " as ="style "> < link href ="js/app.3e2fa2b1.js " rel ="preload " as ="script "> < link href ="js/chunk-vendors.ca59db32.js " rel ="preload " as ="script "> < link href ="css/chunk-vendors.7464670d.css " rel ="stylesheet "> < link href ="css/app.93b8a9f2.css " rel ="stylesheet "> </ head > < body > < noscript > < strong > We're sorry but wg-upload doesn't work properly without JavaScript enabled. Please enable it to continue.</ strong > </ noscript > < div id ="app "> </ div > < script src ="js/chunk-vendors.ca59db32.js "> </ script > < script src ="js/app.3e2fa2b1.js "> </ script > </ body > </ html >
0 commit comments