Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
dbceb7f6 by 任超
Options

feat:图片上传

1 parent b3c9544c
Inline Side-by-side
Showing 7 changed files with 471 additions and 28 deletions
...@@ -74,3 +74,6 @@ ...@@ -74,3 +74,6 @@
74 text-align: center; 74 text-align: center;
75 margin-bottom: 20px; 75 margin-bottom: 20px;
76 } 76 }
77 .next_button a {
78 color: #fff;
79 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -34,14 +34,14 @@ ...@@ -34,14 +34,14 @@
34 border-left-color: #1E9FFF; 34 border-left-color: #1E9FFF;
35 } 35 }
36 .selected { 36 .selected {
37 background-color: #5FB878!important; 37 background-color: #009688!important;
38 color: #fff!important; 38 color: #fff!important;
39 } 39 }
40 .selected:hover { 40 .selected:hover {
41 background-color: #5FB878!important; 41 background-color: #009688!important;
42 } 42 }
43 .app_progress li.selected:after { 43 .app_progress li.selected:after {
44 border-left-color: #5FB878; 44 border-left-color: #009688;
45 } 45 }
46 .line { 46 .line {
47 width: 62px; 47 width: 62px;
......
1 .content_box {
2 width: 1200px;
3 margin: 0 auto;
4 min-height:calc(100vh - 227px);
5 padding: 20px 0;
6 }
7 .title {
8 height: 16px;
9 padding: 10px 0;
10 margin: 15px 0;
11 padding-left: 10px;
12 }
13 .title h2 {
14 font-weight: 600;
15 height: 16px;
16 line-height: 16px;
17 padding-left: 5px;
18 border-left: 3px solid #ffffff;
19 float: left;
20 }
21 .title i {
22 font-size: 24px;
23 position: relative;
24 top: -5px;
25 color: #ffffff;
26 left: 198px;
27 }
28 .layui-icon {
29 cursor: pointer;
30 }
31 .tabs_title i{
32 font-size: 24px;
33 position: relative;
34 top: -10px;
35 color: #0091FF;
36 }
37 .layui-tab {
38 width: 23%;
39 display: inline-block;
40 }
41 .layui-tab-bar {
42 display: none;
43 }
44 .img_update {
45 border: 1px solid #eeeeee;
46 overflow: hidden;
47 }
48
49 .fileBox{ margin:10px;width: 330px;float: left; }
50 #fileSpan{display:inline-block;width:300px;height:150px;border:2px dashed #ccc;text-align:center;line-height:150px;position: relative;}
51 #fileInput {
52 position: absolute;
53 width: 100%;
54 height: 100%;
55 left: 0;
56 top: 0;
57 opacity: 0;
58 }
59 .fileList_parent{margin:20px;display:none;}
60 .fileList_parent {
61 float: left;
62 }
63 .operation {
64 color: #0091FF;
65 cursor: pointer;
66 }
67 .fileList tr {
68 line-height: 28px;
69 }
...\ No newline at end of file ...\ No newline at end of file
1 $(function () {
2
3 var tabledata = [
4 {
5 name: 'renchao',
6 idcard: '61012419930879879',
7 phone: '18740677380'
8 }
9 ];
10 var sellData = [
11 {
12 name: 'renchao',
13 idcard: '61012419930879879',
14 phone: '18740677380'
15 }
16 ];
17
18 layui.use('element', function () {
19 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
20 //监听导航点击
21 element.on('nav(demo)', function (elem) {
22 layer.msg(elem.text());
23 });
24 });
25 addTabs('#wssq')
26
27 // 业务
28 layui.use('element', function () {
29 var element = layui.element;
30 //监听Tab切换，以改变地址hash值
31 element.on('tab(status)', function () {
32 console.log(this.getAttribute('lay-id'))
33 });
34 });
35 // 买方信息
36 layui.use('table', function () {
37 var table = layui.table;
38 table.render({
39 elem: '#buyInfo'
40 // , url: '../staticLib/wdyy/index.json'
41 , cols: [[
42 { field: 'name', title: '权利人', align: 'center', edit: 'text' }
43 , { field: 'idcard', title: '身份证号', align: 'center', edit: 'text' }
44 , { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
45 , { title: '操作', toolbar: '#barDemo', align: 'center' }
46 ]]
47 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
48 return {
49 "code": res.code, //解析接口状态
50 "data": res.data //解析数据列表
51 };
52 },
53 data: tabledata
54 });
55 table.on('row(buyInfo)', function (obj) {
56 var rowIndex = $(obj.tr).attr("data-index");
57 layer.confirm('此操作将删除一列是否继续', {
58 btn: ['是', '否'] //按钮
59 }, function () {
60 tabledata.splice(rowIndex, 1);
61 table.reload('buyInfo', {
62 data: tabledata
63 })
64 layer.closeAll();
65 }, function () {
66 });
67 });
68
69 $('.tableAdd').click(function () {
70 tabledata.push({
71 "name": ""
72 , "idcard": ""
73 , "phone": ""
74 })
75 table.reload('buyInfo', {
76 data: tabledata
77 })
78 })
79 })
80
81 // 卖方信息
82 layui.use('table', function () {
83 var table = layui.table;
84 table.render({
85 elem: '#sellInfo'
86 , cols: [[
87 { field: 'name', title: '义务人', align: 'center', edit: 'text' }
88 , { field: 'idcard', title: '证件号', align: 'center', edit: 'text' }
89 , { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
90 , { title: '操作', toolbar: '#barDemo', align: 'center' }
91 ]]
92 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
93 return {
94 "code": res.code, //解析接口状态
95 "data": res.data //解析数据列表
96 };
97 },
98 data: sellData
99 });
100 //监听行工具事件
101 table.on('row(sellInfo)', function (obj) {
102 var rowIndex = $(obj.tr).attr("data-index");
103 layer.confirm('此操作将删除一列是否继续', {
104 btn: ['是', '否'] //按钮
105 }, function () {
106 sellData.splice(rowIndex, 1);
107 table.reload('sellInfo', {
108 data: sellData
109 })
110 layer.closeAll();
111 }, function () {
112 });
113 });
114
115 $('.tableAdd1').click(function () {
116 sellData.push({
117 "name": ""
118 , "idcard": ""
119 , "phone": ""
120 })
121 console.log(999, sellData)
122 table.reload('sellInfo', {
123 data: sellData
124 })
125 })
126 })
127 // 图片上传
128 //元素
129 var oFileBox = $(".fileBox"); //选择文件父级盒子
130 var oFileInput = $("#fileInput"); //选择文件按钮
131 var oFileSpan = $("#fileSpan"); //选择文件框
132 var oFileList_parent = $(".fileList_parent"); //表格
133 var oFileList = $(".fileList"); //表格tbody
134 var oFileBtn = $("#fileBtn"); //上传按钮
135 var flieList = []; //数据，为一个复合数组
136 var sizeObj = []; //存放每个文件大小的数组，用来比较去重
137 //拖拽外部文件，进入目标元素触发
138 oFileSpan.on("dragenter", function () {
139 $(this).find('.file_name').text("可以释放鼠标了！").css("background", "#ccc");
140 });
141 //拖拽外部文件，进入目标、离开目标之间，连续触发
142 oFileSpan.on("dragover", function () {
143 return false;
144 });
145 //拖拽外部文件，离开目标元素触发
146 oFileSpan.on("dragleave", function () {
147 $(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
148 });
149 //拖拽外部文件，在目标元素上释放鼠标触发
150 oFileSpan.on("drop", function (ev) {
151 var fs = ev.originalEvent.dataTransfer.files;
152 analysisList(fs); //解析列表函数
153 $(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
154 return false;
155 });
156 //点击选择文件按钮选文件
157 oFileInput.on("change", function () {
158 analysisList(this.files);
159 })
160
161 //解析列表函数
162 function analysisList(obj) {
163
164 //如果没有文件
165 if (obj.length < 1) {
166 return false;
167 }
168 for (var i = 0; i < obj.length; i++) {
169
170 var fileObj = obj[i]; //单个文件
171 var name = fileObj.name; //文件名
172 var size = fileObj.size; //文件大小
173 var type = fileType(name); //文件类型，获取的是文件的后缀
174
175 //文件大于30M，就不上传
176 if (size > 1024 * 1024 * 1024 || size == 0) {
177 layer.msg( '超过了30M，不能上传', {icon: 5});
178 continue;
179 }
180 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
181 if (sizeObj.indexOf(size) != -1) {
182 layer.msg( '已经选择，不能重复上传', {icon: 5});
183 continue;
184 }
185 //给json对象添加内容，得到选择的文件的数据
186 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
187 flieList.push(itemArr);
188 //把这个文件的大小放进数组中
189 sizeObj.push(size);
190 }
191 createList() //生成列表
192 oFileList_parent.show(); //表格显示
193 document.querySelector('#fileInput').value = null
194 };
195
196
197 //生成列表
198 function createList() {
199 oFileList.empty(); //先清空元素内容
200 for (var i = 0; i < flieList.length; i++) {
201 var fileData = flieList[i]; //flieList数组中的某一个
202 var name = fileData[1]; //文件名
203 var oTr = $("<tr></tr>");
204 var str = '<td><cite title="' + name + '">' + name + '</cite></td>';
205 str += '<td><a class="operation">删除</a></td>';
206 oTr.html(str);
207 oTr.appendTo(oFileList);
208 }
209 }
210 //删除表格行
211 oFileList.on("click", "a.operation", function () {
212 var oTr = $(this).parents("tr");
213 var index = oTr.index();
214 oTr.remove(); //删除这一行
215 flieList.splice(index, 1); //删除数据
216 sizeObj.splice(index, 1); //删除文件大小数组中的项
217 });
218 //上传
219 oFileBtn.on("click", function () {
220 oFileBtn.off();
221 var tr = oFileList.find("tr"); //获取所有tr列表
222 var successNum = 0; //已上传成功的数目
223 oFileList.off(); //取消删除事件
224 oFileBox.slideUp(); //隐藏输入框
225 oFileList.find("a.operation").text("等待上传");
226 for (var i = 0; i < tr.length; i++) {
227 uploadFn(tr.eq(i), i); //参数为当前项，下标
228 }
229 function uploadFn(obj, i) {
230 var formData = new FormData();
231 var arrNow = flieList[i]; //获取数据数组的当前项
232 // 从当前项中获取上传文件，放到 formData对象里面，formData参数以key name的方式
233 var result = arrNow[0]; //数据
234 formData.append("imageFile", result);
235 var name = arrNow[1]; //文件名
236 formData.append("email", name);
237 var oOperation = obj.find("a.operation"); //按钮
238 oOperation.text("正在上传"); //改变操作按钮
239 oOperation.off();
240 var request = $.ajax({
241 type: "POST",
242 url: "../more/cModifyImageAction.go",
243 data: formData, //这里上传的数据使用了formData 对象
244 processData: false, //必须false才会自动加上正确的Content-Type
245 contentType: false,
246
247 //这里我们先拿到jQuery产生的XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
248 xhr: function () {
249 var xhr = $.ajaxSettings.xhr();
250 if (onprogress && xhr.upload) {
251 xhr.upload.addEventListener("progress", onprogress, false);
252 return xhr;
253 }
254 },
255 //上传成功后回调
256 success: function () {
257 oOperation.text("成功");
258 successNum++;
259 console.log(successNum);
260 if (successNum == tr.length) {
261 open("http://www.baidu.com", "_self"); //如果全部传成功了，跳转
262 }
263 },
264 //上传失败后回调
265 error: function () {
266 oOperation.text("重传");
267 oOperation.on("click", function () {
268 request.abort(); //终止本次
269 uploadFn(obj, i);
270 });
271 }
272 });
273 }
274 });
275 })
276 //通过文件名，返回文件的后缀名
277 function fileType(name) {
278 var nameArr = name.split(".");
279 return nameArr[nameArr.length - 1].toLowerCase();
280 }
...@@ -14,30 +14,6 @@ ...@@ -14,30 +14,6 @@
14 "classify": "作家", 14 "classify": "作家",
15 "score": 57, 15 "score": 57,
16 "state": 1 16 "state": 1
17 },
18 {
19 "username": "user-1",
20 "sex": "男",
21 "city": "城市-1",
22 "sign": "签名-1",
23 "experience": 884,
24 "logins": 58,
25 "wealth": 64928690,
26 "classify": "词人",
27 "score": 27,
28 "state": 1
29 },
30 {
31 "username": "user-2",
32 "sex": "女",
33 "city": "城市-2",
34 "sign": "签名-2",
35 "experience": 650,
36 "logins": 77,
37 "wealth": 6298078,
38 "classify": "酱油",
39 "score": 31,
40 "state": 0
41 } 17 }
42 ] 18 ]
43 } 19 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -219,7 +219,9 @@ ...@@ -219,7 +219,9 @@
219 </li> 219 </li>
220 </ul> 220 </ul>
221 <div class="next_button"> 221 <div class="next_button">
222 <button type="button" class="layui-btn layui-btn-normal">下一步</button> 222 <button type="button" class="layui-btn layui-btn-normal">
223 <a href="./yysq.html">下一步</a>
224 </button>
223 </div> 225 </div>
224 </div> 226 </div>
225 </div> 227 </div>
......
1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6 <style>
7 </style>
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <title>立即办理-申请</title>
10 <script type="text/javascript" src="../staticJs/head.js"></script>
11 <link rel="stylesheet" type="text/css" href="../staticCss/yysq.css">
12 <link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
13 </head>
14
15 <body>
16 <div class="navigation_crumbs">
17 <div class="contentBox">
18 <span class="layui-breadcrumb">
19 <a href="../../index.html">首页</a>
20 <a href="../wssq/index.html">网上申请</a>
21 <a><cite>在线申请</cite></a>
22 </span>
23 </div>
24 </div>
25 <div class="content_box">
26 <div class="name_title layui-bg-gray">
27 <h2></h2>
28 <p></p>
29 </div>
30 <ul class="app_progress">
31 <li class="selected">
32 <span>1</span>
33 效验
34 </li>
35 <div class="line"></div>
36 <li class="active">
37 <span>2</span>
38 申请
39 </li>
40 <div class="line"></div>
41 <li>
42 <span>3</span>
43 完税
44 </li>
45 <div class="line"></div>
46 <li>
47 <span>4</span>
48 认证
49 </li>
50 <div class="line"></div>
51 <li>
52 <span>5</span>
53 领证方式
54 </li>
55 <div class="line"></div>
56 <li>
57 <span>6</span>
58 缴费
59 </li>
60 <div class="line"></div>
61 <li>
62 <span>7</span>
63 公示
64 </li>
65 </ul>
66 <div class="title layui-bg-green">
67 <h2>买方信息/共有情况</h2>
68 </div>
69 <div class="tabs_title">
70 <div class="layui-tab layui-tab-brief" lay-filter="status">
71 <ul class="layui-tab-title">
72 <li class="layui-this" lay-id="1">单独所有</li>
73 <li lay-id="2">共同共有</li>
74 <li lay-id="3">按份共有</li>
75 </ul>
76 <div class="layui-tab-content"></div>
77 </div>
78 <i class="layui-icon layui-icon-add-circle tableAdd"></i>
79 </div>
80 <table id="buyInfo" lay-filter="buyInfo"></table>
81
82 <div class="title layui-bg-green">
83 <h2>卖方信息</h2>
84 <i class="layui-icon layui-icon-add-circle tableAdd1"></i>
85 </div>
86 <table id="sellInfo" lay-filter="sellInfo"></table>
87
88 <div class="title layui-bg-green">
89 <h2>申报材料</h2>
90 </div>
91 <div class="img_update">
92 <div class="fileBox">
93 <div id="fileSpan" class="vm">
94 <input type="file" multiple id="fileInput" />
95 <p class="file_name">
96 点击或拖拽文件上传
97 </p>
98 </div>
99 </div>
100 <table width="36%" border="1" class="fileList_parent">
101 <tbody class="fileList">
102 </table>
103 </div>
104 </div>
105 </body>
106 <script type="text/javascript" src="../staticJs/common.js"></script>
107 <script type="text/javascript" src="../staticJs/down.js"></script>
108 <script type="text/javascript" src="../staticJs/yysq.js"></script>
109 <script type="text/html" id="barDemo">
110 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
111 </script>
112
113 </html>
...\ No newline at end of file ...\ No newline at end of file