Skip to content

任超 / js.portalStaticPage

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

style:资料上传

1 parent 2eae2e04
Inline Side-by-side
Showing 6 changed files with 443 additions and 190 deletions
...@@ -55,9 +55,9 @@ ...@@ -55,9 +55,9 @@
55 display: none; 55 display: none;
56 } 56 }
57 .img_update { 57 .img_update {
58 border: 1px solid #eeeeee;
59 overflow: hidden; 58 overflow: hidden;
60 position: relative; 59 position: relative;
60 float: left;
61 } 61 }
62 62
63 .fileBox{ 63 .fileBox{
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
83 font-size: 14px; 83 font-size: 14px;
84 line-height: 24px; 84 line-height: 24px;
85 } 85 }
86 #fileSpan{ 86 #fileSpan , #fileSpan1, #fileSpan3{
87 display: inline-block; 87 display: inline-block;
88 width: 285px; 88 width: 285px;
89 height: 200px; 89 height: 200px;
...@@ -91,7 +91,10 @@ ...@@ -91,7 +91,10 @@
91 text-align: center; 91 text-align: center;
92 position: relative; 92 position: relative;
93 } 93 }
94 #fileInput { 94 #fileSpan:hover , #fileSpan1:hover, #fileSpan3:hover{
95 border-color:#0091FF;
96 }
97 #fileInput, #fileInput1, #fileInput3{
95 position: absolute; 98 position: absolute;
96 width: 100%; 99 width: 100%;
97 height: 100%; 100 height: 100%;
...@@ -101,7 +104,7 @@ ...@@ -101,7 +104,7 @@
101 cursor: pointer; 104 cursor: pointer;
102 z-index: 10; 105 z-index: 10;
103 } 106 }
104 .fileList_parent{ 107 .fileList_parent, .fileList_parent1, .fileList_parent3{
105 position: absolute; 108 position: absolute;
106 left: 12px; 109 left: 12px;
107 top: 12px; 110 top: 12px;
...@@ -125,11 +128,11 @@ ...@@ -125,11 +128,11 @@
125 text-align: center; 128 text-align: center;
126 margin: 0 auto; 129 margin: 0 auto;
127 } 130 }
128 .fileList_parent img { 131 .fileList_parent img , .fileList_parent1 img, .fileList_parent3 img{
129 width: 50px; 132 width: 50px;
130 height: 60px; 133 height: 60px;
131 } 134 }
132 .fileList_parent { 135 .fileList_parent, .fileList_parent1, .fileList_parent3 {
133 float: left; 136 float: left;
134 } 137 }
135 .file_name { 138 .file_name {
...@@ -142,19 +145,19 @@ ...@@ -142,19 +145,19 @@
142 color: #0091FF; 145 color: #0091FF;
143 cursor: pointer; 146 cursor: pointer;
144 } 147 }
145 .fileListName { 148 .fileListName, .fileListName1, .fileListName3{
146 text-align: center; 149 text-align: center;
147 padding-top: 10px; 150 padding-top: 10px;
148 } 151 }
149 .fileListName p { 152 .fileListName p , .fileListName1 p, .fileListName3 p{
150 display: inline-block; 153 display: inline-block;
151 height: 17px; 154 height: 17px;
152 } 155 }
153 .fileListName a { 156 .fileListName a , .fileListName1 a, .fileListName3 a {
154 display: inline-block; 157 display: inline-block;
155 line-height: 14px; 158 line-height: 14px;
156 } 159 }
157 .fileListName a i { 160 .fileListName a i, .fileListName1 a i, .fileListName3 a i{
158 line-height: 14px; 161 line-height: 14px;
159 height: 14px; 162 height: 14px;
160 padding: 0; 163 padding: 0;
...@@ -163,11 +166,11 @@ ...@@ -163,11 +166,11 @@
163 font-size: 14px; 166 font-size: 14px;
164 font-weight: 600; 167 font-weight: 600;
165 } 168 }
166 .fileList tr { 169 .fileList tr, .fileList1 tr, .fileList3 tr {
167 line-height: 28px; 170 line-height: 28px;
168 width: 70px; 171 width: 70px;
169 } 172 }
170 .fileList tr td { 173 .fileList tr td, .fileList1 tr td, .fileList3 tr td {
171 width: 70px; 174 width: 70px;
172 } 175 }
173 .operation a:hover { 176 .operation a:hover {
...@@ -175,10 +178,7 @@ ...@@ -175,10 +178,7 @@
175 } 178 }
176 .next_button { 179 .next_button {
177 text-align: center; 180 text-align: center;
178 margin: 15px 0; 181 margin: 30px 0 100px 0;
179 }
180 .next_button a {
181 color: #ffffff;
182 } 182 }
183 .name_title { 183 .name_title {
184 padding: 10px; 184 padding: 10px;
...@@ -285,4 +285,22 @@ ...@@ -285,4 +285,22 @@
285 /* -----------------资料上传---------------------- */ 285 /* -----------------资料上传---------------------- */
286 .data_upload { 286 .data_upload {
287 margin-top: 20px; 287 margin-top: 20px;
288 overflow: hidden;
289 }
290 /* -----------------询问笔录---------------------- */
291 .record {
292 position: absolute;
293 left: 0;
294 bottom: 30px;
295 display: block;
296 line-height: 20px;
297 height: 20px;
298 color: #0091FF;
299 text-align: center;
300 z-index: 30;
301 width: 100%;
302 cursor: pointer;
303 }
304 .record:hover {
305 color: #0091FF;
288 } 306 }
...\ No newline at end of file ...\ No newline at end of file
......
1 $(function () {
2 //元素
3 var oFileInput = $("#fileInput"); //选择文件按钮
4 var oFileSpan = $("#fileSpan"); //选择文件框
5 var oFileList_parent = $(".fileList_parent"); //表格
6 var fileListName = $('.fileListName') //上传的数据列表
7 var oFileList = $(".fileList"); //表格tbody
8 var sizeObj = []; //存放每个文件大小的数组，用来比较去重
9 //拖拽外部文件，进入目标元素触发
10 oFileSpan.on("dragenter", function () {
11 $(this).find('.file_name').css("background", "#ccc");
12 $(this).find('.file_name').empty();
13 $(this).find('.file_name').append(
14 '<p style="line-height:200px">可以方鼠标了</p>'
15 )
16 });
17 //拖拽外部文件，进入目标、离开目标之间，连续触发
18 oFileSpan.on("dragover", function () {
19 return false;
20 });
21 //拖拽外部文件，离开目标元素触发
22 oFileSpan.on("dragleave", function () {
23 $(this).find('.file_name').empty();
24 $(this).find('.file_name').css("background", "#ffff");
25 $(this).find('.file_name').append(
26 ' <i class="layui-icon layui-icon-addition"></i>' +
27 '<p>点击或拖拽文件上传</p>' +
28 '<div class="certificate">登记申请书（2份）</div>' +
29 '<div class="fileListName"></div>'
30 )
31 });
32 //拖拽外部文件，在目标元素上释放鼠标触发
33 oFileSpan.on("drop", function (ev) {
34 var fs = ev.originalEvent.dataTransfer.files;
35 $(this).find('.file_name').empty();
36 $(this).find('.file_name').css("background", "#ffff");
37 $(this).find('.file_name').append(
38 ' <i class="layui-icon layui-icon-addition"></i>' +
39 '<p>点击或拖拽文件上传</p>' +
40 '<div class="certificate">登记申请书（2份）</div>' +
41 '<div class="fileListName"></div>'
42 )
43 analysisList(fs); //解析列表函数
44 return false;
45 });
46 //点击选择文件按钮选文件
47 oFileInput.on("change", function () {
48 analysisList(this.files);
49 })
50 //解析列表函数
51 function analysisList(obj) {
52 //如果没有文件
53 if (obj.length < 1) {
54 return false;
55 }
56 for (var i = 0; i < obj.length; i++) {
57 var fileObj = obj[i]; //单个文件
58 var name = fileObj.name; //文件名
59 var size = fileObj.size; //文件大小
60 var type = fileType(name); //文件类型，获取的是文件的后缀
61 //文件大于30M，就不上传
62 if (size > 1024 * 1024 * 1024 || size == 0) {
63 layer.msg('超过了30M，不能上传', { icon: 5 });
64 return false;
65 }
66 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
67 if (sizeObj.indexOf(size) != -1) {
68 layer.msg('已经选择，不能重复上传', { icon: 5 });
69 return false;
70 }
71 //给json对象添加内容，得到选择的文件的数据
72 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
73 flieList.push(itemArr);
74 //把这个文件的大小放进数组中
75 sizeObj.push(size);
76 }
77 createList() //生成列表
78 document.querySelector('#fileInput').value = null
79 if (flieList.length == 2) {
80 oFileList_parent.show(); //表格显示
81 }
82 };
83 //生成列表
84 function createList() {
85 oFileList.empty(); //先清空元素内容
86 for (var i = 0; i < flieList.length; i++) {
87 var fileData = flieList[i]; //flieList数组中的某一个
88 var name = fileData[1]; //文件名
89 var oTr = $("<tr></tr>");
90 var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
91 str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
92 oTr.html(str);
93 oTr.appendTo(oFileList);
94 $('.fileListName').append(
95 '<p class="fileName" title="' + name + '">' + name + '</p>' +
96 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
97 );
98 }
99 }
100 //删除表格行
101 oFileList.on("click", "a.operation", function () {
102 var oTr = $(this).parents("tr");
103 var index = oTr.index();
104 oTr.remove(); //删除这一行
105 flieList.splice(index, 1); //删除数据
106 sizeObj.splice(index, 1); //删除文件大小数组中的项
107 if (flieList.length == 0) {
108 oFileList_parent.hide()
109 $('.fileListName').empty();
110 }
111 });
112 })
113 //通过文件名，返回文件的后缀名
114 function fileType(name) {
115 var nameArr = name.split(".");
116 return nameArr[nameArr.length - 1].toLowerCase();
117 }
118
1 $(function () {
2 //元素
3 var oFileInput = $("#fileInput1"); //选择文件按钮
4 var oFileSpan = $("#fileSpan1"); //选择文件框
5 var oFileList_parent = $(".fileList_parent1"); //表格
6 var fileListName = $('.fileListName1') //上传的数据列表
7 var oFileList = $(".fileList1"); //表格tbody
8 var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重
9 //拖拽外部文件，进入目标元素触发
10 oFileSpan.on("dragenter", function () {
11 $(this).find('.file_name').css("background", "#ccc");
12 $(this).find('.file_name').empty();
13 $(this).find('.file_name').append(
14 '<p style="line-height:200px">可以方鼠标了</p>'
15 )
16 });
17 //拖拽外部文件，进入目标、离开目标之间，连续触发
18 oFileSpan.on("dragover", function () {
19 return false;
20 });
21 //拖拽外部文件，离开目标元素触发
22 oFileSpan.on("dragleave", function () {
23 $(this).find('.file_name').empty();
24 $(this).find('.file_name').css("background", "#ffff");
25 $(this).find('.file_name').append(
26 ' <i class="layui-icon layui-icon-addition"></i>' +
27 '<p>点击或拖拽文件上传</p>' +
28 '<div class="certificate">房屋所有权证书（2份）</div>' +
29 '<div class="fileListName1"></div>'
30 )
31 });
32 //拖拽外部文件，在目标元素上释放鼠标触发
33 oFileSpan.on("drop", function (ev) {
34 var fs = ev.originalEvent.dataTransfer.files;
35 $(this).find('.file_name').empty();
36 $(this).find('.file_name').css("background", "#ffff");
37 $(this).find('.file_name').append(
38 ' <i class="layui-icon layui-icon-addition"></i>' +
39 '<p>点击或拖拽文件上传</p>' +
40 '<div class="certificate">房屋所有权证书（2份）</div>' +
41 '<div class="fileListName1"></div>'
42 )
43 analysisList(fs); //解析列表函数
44 return false;
45 });
46 //点击选择文件按钮选文件
47 oFileInput.on("change", function () {
48 analysisList(this.files);
49 })
50 //解析列表函数
51 function analysisList(obj) {
52 //如果没有文件
53 if (obj.length < 1) {
54 return false;
55 }
56 for (var i = 0; i < obj.length; i++) {
57 var fileObj = obj[i]; //单个文件
58 var name = fileObj.name; //文件名
59 var size = fileObj.size; //文件大小
60 var type = fileType(name); //文件类型，获取的是文件的后缀
61 //文件大于30M，就不上传
62 if (size > 1024 * 1024 * 1024 || size == 0) {
63 layer.msg('超过了30M，不能上传', { icon: 5 });
64 return false;
65 }
66 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
67 if (sizeObj1.indexOf(size) != -1) {
68 layer.msg('已经选择，不能重复上传', { icon: 5 });
69 return false;
70 }
71 //给json对象添加内容，得到选择的文件的数据
72 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
73 flieList1.push(itemArr);
74 //把这个文件的大小放进数组中
75 sizeObj1.push(size);
76 }
77 createList() //生成列表
78 if (flieList1.length == 2) {
79 oFileList_parent.show(); //表格显示
80 }
81 document.querySelector('#fileInput1').value = null
82 };
83 //生成列表
84 function createList() {
85 oFileList.empty(); //先清空元素内容
86 for (var i = 0; i < flieList1.length; i++) {
87 var fileData = flieList1[i]; //flieList1数组中的某一个
88 var name = fileData[1]; //文件名
89 var oTr = $("<tr></tr>");
90 var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
91 str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
92 oTr.html(str);
93 oTr.appendTo(oFileList);
94 $('.fileListName1').append(
95 '<p class="fileName" title="' + name + '">' + name + '</p>' +
96 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
97 );
98 }
99 }
100 //删除表格行
101 oFileList.on("click", "a.operation", function () {
102 var oTr = $(this).parents("tr");
103 var index = oTr.index();
104 oTr.remove(); //删除这一行
105 flieList1.splice(index, 1); //删除数据
106 sizeObj1.splice(index, 1); //删除文件大小数组中的项
107 if (flieList1.length == 0) {
108 oFileList_parent.hide()
109 $('.fileListName1').empty();
110 }
111 });
112 })
113 //通过文件名，返回文件的后缀名
114 function fileType(name) {
115 var nameArr = name.split(".");
116 return nameArr[nameArr.length - 1].toLowerCase();
117 }
118
1 $(function () {
2 //元素
3 var oFileInput = $("#fileInput3"); //选择文件按钮
4 var oFileSpan = $("#fileSpan3"); //选择文件框
5 var oFileList_parent = $(".fileList_parent3"); //表格
6 var oFileList = $(".fileList3"); //表格tbody
7 var sizeObj3 = []; //存放每个文件大小的数组，用来比较去重
8 //拖拽外部文件，进入目标元素触发
9 oFileSpan.on("dragenter", function () {
10 $(this).find('.file_name').css("background", "#ccc");
11 $(this).find('.file_name').empty();
12 $(this).find('.file_name').append(
13 '<p style="line-height:200px">可以方鼠标了</p>'
14 )
15 });
16 //拖拽外部文件，进入目标、离开目标之间，连续触发
17 oFileSpan.on("dragover", function () {
18 return false;
19 });
20 //拖拽外部文件，离开目标元素触发
21 oFileSpan.on("dragleave", function () {
22 $(this).find('.file_name').empty();
23 $(this).find('.file_name').css("background", "#ffff");
24 $(this).find('.file_name').append(
25 ' <i class="layui-icon layui-icon-addition"></i>' +
26 '<p>点击或拖拽文件上传</p>' +
27 '<div class="certificate">房屋所有权证书（2份）</div>' +
28 '<div class="fileListName3"></div>'
29 )
30 });
31 //拖拽外部文件，在目标元素上释放鼠标触发
32 oFileSpan.on("drop", function (ev) {
33 var fs = ev.originalEvent.dataTransfer.files;
34 $(this).find('.file_name').empty();
35 $(this).find('.file_name').css("background", "#ffff");
36 $(this).find('.file_name').append(
37 ' <i class="layui-icon layui-icon-addition"></i>' +
38 '<p>点击或拖拽文件上传</p>' +
39 '<div class="certificate">房屋所有权证书（2份）</div>' +
40 '<div class="fileListName3"></div>'
41 )
42 analysisList(fs); //解析列表函数
43 return false;
44 });
45 //点击选择文件按钮选文件
46 oFileInput.on("change", function () {
47 analysisList(this.files);
48 })
49 //解析列表函数
50 function analysisList(obj) {
51 //如果没有文件
52 if (obj.length < 1) {
53 return false;
54 }
55 for (var i = 0; i < obj.length; i++) {
56 var fileObj = obj[i]; //单个文件
57 var name = fileObj.name; //文件名
58 var size = fileObj.size; //文件大小
59 var type = fileType(name); //文件类型，获取的是文件的后缀
60 //文件大于30M，就不上传
61 if (size > 1024 * 1024 * 1024 || size == 0) {
62 layer.msg('超过了30M，不能上传', { icon: 5 });
63 return false;
64 }
65 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
66 if (sizeObj3.indexOf(size) != -1) {
67 layer.msg('已经选择，不能重复上传', { icon: 5 });
68 return false;
69 }
70 //给json对象添加内容，得到选择的文件的数据
71 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
72 flieList3.push(itemArr);
73 //把这个文件的大小放进数组中
74 sizeObj3.push(size);
75 }
76 createList() //生成列表
77 if (flieList3.length == 1) {
78 oFileList_parent.show(); //表格显示
79 }
80 document.querySelector('#fileInput3').value = null
81 };
82 //生成列表
83 function createList() {
84 oFileList.empty(); //先清空元素内容
85 for (var i = 0; i < flieList3.length; i++) {
86 var fileData = flieList3[i]; //flieList3数组中的某一个
87 var name = fileData[1]; //文件名
88 var oTr = $("<tr></tr>");
89 var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
90 str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
91 oTr.html(str);
92 oTr.appendTo(oFileList);
93 $('.fileListName3').append(
94 '<p class="fileName" title="' + name + '">' + name + '</p>' +
95 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
96 );
97 }
98 }
99 //删除表格行
100 oFileList.on("click", "a.operation", function () {
101 var oTr = $(this).parents("tr");
102 var index = oTr.index();
103 oTr.remove(); //删除这一行
104 flieList3.splice(index, 1); //删除数据
105 sizeObj3.splice(index, 1); //删除文件大小数组中的项
106 if (flieList3.length == 0) {
107 oFileList_parent.hide()
108 $('.fileListName3').empty();
109 }
110 });
111 })
112 //通过文件名，返回文件的后缀名
113 function fileType(name) {
114 var nameArr = name.split(".");
115 return nameArr[nameArr.length - 1].toLowerCase();
116 }
117
1 $(function () {
2 layui.use('element', function () { 1 layui.use('element', function () {
3 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 2 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
4 }); 3 });
...@@ -130,178 +129,16 @@ $(function () { ...@@ -130,178 +129,16 @@ $(function () {
130 }) 129 })
131 }) 130 })
132 // 图片上传 131 // 图片上传
133 //元素 132 // 询问笔录
134 var oFileBox = $(".fileBox"); //选择文件父级盒子 133 $('.record').click(function(event){
135 var oFileInput = $("#fileInput"); //选择文件按钮 134 event.stopPropagation();
136 var oFileSpan = $("#fileSpan"); //选择文件框 135 console.log('下载模板99')
137 var oFileList_parent = $(".fileList_parent"); //表格 136 })
138 var oFileList = $(".fileList"); //表格tbody 137 var flieList = []; // 登记证书列表
139 var oFileBtn = $("#fileBtn"); //上传按钮 138 var flieList1 = []; // 房屋所有权证书列表
140 var flieList = []; //数据，为一个复合数组 139 var flieList3 = []; // 询问笔录
141 var sizeObj = []; //存放每个文件大小的数组，用来比较去重 140 $('.next_button a').click(function(){
142 //拖拽外部文件，进入目标元素触发 141 console.log(999, flieList,5689, flieList1,98999, flieList3)
143 oFileSpan.on("dragenter", function () { 142 return false
144 $(this).find('.file_name').css("background", "#ccc");
145 $('.file_name').empty();
146 $(this).find('.file_name').append(
147 '<p style="line-height:200px">可以方鼠标了</p>'
148 )
149 });
150 //拖拽外部文件，进入目标、离开目标之间，连续触发
151 oFileSpan.on("dragover", function () {
152 return false;
153 });
154 //拖拽外部文件，离开目标元素触发
155 oFileSpan.on("dragleave", function () {
156 $('.file_name').empty();
157 $(this).find('.file_name').css("background", "#ffff");
158 $(this).find('.file_name').append(
159 ' <i class="layui-icon layui-icon-addition"></i>' +
160 '<p>点击或拖拽文件上传</p>' +
161 '<div class="certificate">登记申请书（2份）</div>' +
162 '<div class="fileListName"></div>'
163 )
164 });
165 //拖拽外部文件，在目标元素上释放鼠标触发
166 oFileSpan.on("drop", function (ev) {
167 var fs = ev.originalEvent.dataTransfer.files;
168 $('.file_name').empty();
169 $(this).find('.file_name').css("background", "#ffff");
170 $(this).find('.file_name').append(
171 ' <i class="layui-icon layui-icon-addition"></i>' +
172 '<p>点击或拖拽文件上传</p>' +
173 '<div class="certificate">登记申请书（2份）</div>' +
174 '<div class="fileListName"></div>'
175 )
176 analysisList(fs); //解析列表函数
177 return false;
178 });
179 //点击选择文件按钮选文件
180 oFileInput.on("change", function () {
181 analysisList(this.files);
182 }) 143 })
183 //解析列表函数
184 function analysisList(obj) {
185 //如果没有文件
186 if (obj.length < 1) {
187 return false;
188 }
189 for (var i = 0; i < obj.length; i++) {
190 var fileObj = obj[i]; //单个文件
191 var name = fileObj.name; //文件名
192 var size = fileObj.size; //文件大小
193 var type = fileType(name); //文件类型，获取的是文件的后缀
194 //文件大于30M，就不上传
195 if (size > 1024 * 1024 * 1024 || size == 0) {
196 layer.msg('超过了30M，不能上传', { icon: 5 });
197 continue;
198 }
199 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
200 if (sizeObj.indexOf(size) != -1) {
201 layer.msg('已经选择，不能重复上传', { icon: 5 });
202 continue;
203 }
204 //给json对象添加内容，得到选择的文件的数据
205 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
206 flieList.push(itemArr);
207 //把这个文件的大小放进数组中
208 sizeObj.push(size);
209 }
210 createList() //生成列表
211 document.querySelector('#fileInput').value = null
212 if (flieList.length == 2) {
213 oFileList_parent.show(); //表格显示
214 }
215 };
216 //生成列表
217 function createList() {
218 oFileList.empty(); //先清空元素内容
219 for (var i = 0; i < flieList.length; i++) {
220 var fileData = flieList[i]; //flieList数组中的某一个
221 var name = fileData[1]; //文件名
222 var oTr = $("<tr></tr>");
223 var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
224 str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
225 oTr.html(str);
226 oTr.appendTo(oFileList);
227 $('.fileListName').append(
228 '<p class="fileName" title="' + name + '">' + name + '</p>' +
229 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
230 );
231 }
232 }
233 //删除表格行
234 oFileList.on("click", "a.operation", function () {
235 var oTr = $(this).parents("tr");
236 var index = oTr.index();
237 oTr.remove(); //删除这一行
238 flieList.splice(index, 1); //删除数据
239 sizeObj.splice(index, 1); //删除文件大小数组中的项
240 if (flieList.length == 0) {
241 $('.fileList_parent').hide()
242 $('.fileListName').empty();
243 }
244 });
245 //上传
246 oFileBtn.on("click", function () {
247 oFileBtn.off();
248 var tr = oFileList.find("tr"); //获取所有tr列表
249 var successNum = 0; //已上传成功的数目
250 oFileList.off(); //取消删除事件
251 oFileBox.slideUp(); //隐藏输入框
252 oFileList.find("a.operation").text("等待上传");
253 for (var i = 0; i < tr.length; i++) {
254 uploadFn(tr.eq(i), i); //参数为当前项，下标
255 }
256 function uploadFn(obj, i) {
257 var formData = new FormData();
258 var arrNow = flieList[i]; //获取数据数组的当前项
259 // 从当前项中获取上传文件，放到 formData对象里面，formData参数以key name的方式
260 var result = arrNow[0]; //数据
261 formData.append("imageFile", result);
262 var name = arrNow[1]; //文件名
263 formData.append("email", name);
264 var oOperation = obj.find("a.operation"); //按钮
265 oOperation.text("正在上传"); //改变操作按钮
266 oOperation.off();
267 var request = $.ajax({
268 type: "POST",
269 url: "../more/cModifyImageAction.go",
270 data: formData, //这里上传的数据使用了formData 对象
271 processData: false, //必须false才会自动加上正确的Content-Type
272 contentType: false,
273 144
274 //这里我们先拿到jQuery产生的XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
275 xhr: function () {
276 var xhr = $.ajaxSettings.xhr();
277 if (onprogress && xhr.upload) {
278 xhr.upload.addEventListener("progress", onprogress, false);
279 return xhr;
280 }
281 },
282 //上传成功后回调
283 success: function () {
284 oOperation.text("成功");
285 successNum++;
286 console.log(successNum);
287 if (successNum == tr.length) {
288 open("http://www.baidu.com", "_self"); //如果全部传成功了，跳转
289 }
290 },
291 //上传失败后回调
292 error: function () {
293 oOperation.text("重传");
294 oOperation.on("click", function () {
295 request.abort(); //终止本次
296 uploadFn(obj, i);
297 });
298 }
299 });
300 }
301 });
302 })
303 //通过文件名，返回文件的后缀名
304 function fileType(name) {
305 var nameArr = name.split(".");
306 return nameArr[nameArr.length - 1].toLowerCase();
307 }
......
...@@ -131,8 +131,50 @@ ...@@ -131,8 +131,50 @@
131 </table> 131 </table>
132 </div> 132 </div>
133 </div> 133 </div>
134 <!-- 房屋所有权证书 -->
135 <div class="img_update">
136 <div class="fileBox">
137 <div id="fileSpan1" class="vm">
138 <input type="file" multiple id="fileInput1" />
139 <div class="file_name">
140 <i class="layui-icon layui-icon-addition"></i>
141 <p>点击或拖拽文件上传</p>
142 <div class="certificate">房屋所有权证书（2份）</div>
143 <div class="fileListName1"></div>
144 </div>
145 </div>
146 </div>
147 <div class="fileList_parent1">
148 <img src="../staticImages/dui.png">
149 <table width="150px" class="file_list">
150 <tbody class="fileList1">
151 </table>
152 </div>
134 </div> 153 </div>
135 154
155 <!-- 询问笔录 -->
156 <div class="img_update">
157 <div class="fileBox">
158 <div id="fileSpan3" class="vm">
159 <input type="file" multiple id="fileInput3" />
160 <div class="file_name">
161 <i class="layui-icon layui-icon-addition"></i>
162 <p>点击或拖拽文件上传</p>
163 <div class="certificate">询问笔录(1)份</div>
164 <div class="fileListName3"></div>
165 </div>
166 <a class="record">下载模板</a>
167 </div>
168 </div>
169 <div class="fileList_parent3">
170 <img src="../staticImages/dui.png">
171 <table width="150px" class="file_list">
172 <tbody class="fileList3">
173 </table>
174 </div>
175 </div>
176 </div>
177 <!-- 领证方式 -->
136 <div class="next_button"> 178 <div class="next_button">
137 <button type="button" class="layui-btn layui-btn-normal"> 179 <button type="button" class="layui-btn layui-btn-normal">
138 <a href="./wshs.html"> 180 <a href="./wshs.html">
...@@ -145,6 +187,9 @@ ...@@ -145,6 +187,9 @@
145 <script type="text/javascript" src="../staticJs/common.js"></script> 187 <script type="text/javascript" src="../staticJs/common.js"></script>
146 <script type="text/javascript" src="../staticJs/down.js"></script> 188 <script type="text/javascript" src="../staticJs/down.js"></script>
147 <script type="text/javascript" src="../staticJs/yysq.js"></script> 189 <script type="text/javascript" src="../staticJs/yysq.js"></script>
190 <script type="text/javascript" src="../staticJs/imageUpdate.js"></script>
191 <script type="text/javascript" src="../staticJs/imageUpdate1.js"></script>
192 <script type="text/javascript" src="../staticJs/imageUpdate3.js"></script>
148 <script type="text/html" id="barDemo"> 193 <script type="text/html" id="barDemo">
149 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i> 194 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
150 </script> 195 </script>
......