Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
93375dd2 by 任超
Options

style:图片上传

1 parent c35af6ac
Inline Side-by-side
Showing 9 changed files with 281 additions and 324 deletions
...@@ -63,18 +63,17 @@ ...@@ -63,18 +63,17 @@
63 .fileBox{ 63 .fileBox{
64 margin:10px;float: left; 64 margin:10px;float: left;
65 } 65 }
66 .file_name i { 66 .file_name .update {
67 display: block; 67 display: block;
68 font-size: 32px; 68 width: 24px;
69 height: 24px; 69 height: 24px;
70 position: relative; 70 margin-bottom: 10px;
71 line-height: 24px; 71 margin: 0 auto;
72 top: -10px; 72 margin-top: 85px;
73 padding-top: 60px;
74 margin-bottom: 10px; 73 margin-bottom: 10px;
75 } 74 }
76 .file_name p { 75 .file_name p {
77 line-height: 16px; 76 color: #9B9B9B;
78 } 77 }
79 .certificate { 78 .certificate {
80 height: 24px; 79 height: 24px;
...@@ -83,16 +82,19 @@ ...@@ -83,16 +82,19 @@
83 font-size: 14px; 82 font-size: 14px;
84 line-height: 24px; 83 line-height: 24px;
85 text-align: center; 84 text-align: center;
85 width: 240px;
86 } 86 }
87 #fileSpan , #fileSpan1, #fileSpan3{ 87 .fileSpan{
88 display: inline-block; 88 display: inline-block;
89 width: 285px; 89 width: 240px;
90 height: 200px; 90 height: 240px;
91 border: 2px dashed #ccc; 91 border: 2px dashed #ccc;
92 text-align: center; 92 text-align: center;
93 position: relative; 93 position: relative;
94 margin-right: 121px;
95 background: #FCFCFC;
94 } 96 }
95 #fileSpan:hover , #fileSpan1:hover, #fileSpan3:hover{ 97 .fileSpan:hover{
96 border-color:#0091FF; 98 border-color:#0091FF;
97 } 99 }
98 #fileInput, #fileInput1, #fileInput3{ 100 #fileInput, #fileInput1, #fileInput3{
...@@ -105,67 +107,44 @@ ...@@ -105,67 +107,44 @@
105 cursor: pointer; 107 cursor: pointer;
106 z-index: 10; 108 z-index: 10;
107 } 109 }
108 .fileList_parent, .fileList_parent1, .fileList_parent3{
109 position: absolute;
110 left: 12px;
111 top: 12px;
112 width: 285px;
113 height: 200px;
114 text-align: center;
115 box-sizing: border-box;
116 padding: 30px 20px;
117 display: none;
118 background-color: #eee;
119 z-index: 20;
120 }
121 .fileName { 110 .fileName {
122 width: 80px;
123 line-height: 30px;
124 overflow: hidden;
125 text-overflow: ellipsis;
126 white-space: nowrap;
127 }
128 .file_list {
129 text-align: center;
130 margin: 0 auto; 111 margin: 0 auto;
112 width: 102px;
131 } 113 }
132 .fileList_parent img , .fileList_parent1 img, .fileList_parent3 img{ 114 .fileName span {
133 width: 50px; 115 display: inline-block;
134 height: 60px; 116 width: 85px;
135 } 117 overflow: hidden;
136 .fileList_parent, .fileList_parent1, .fileList_parent3 { 118 text-overflow: ellipsis;
137 float: left; 119 white-space: nowrap;
138 } 120 }
139 .file_name { 121 .file_name {
140 height: 200px;
141 text-align: center; 122 text-align: center;
142 line-height: 200px;
143 position: relative; 123 position: relative;
144 } 124 }
145 .operation { 125 .operation {
146 color: #0091FF;
147 cursor: pointer; 126 cursor: pointer;
127 width: 14px;
128 height: 14px;
148 } 129 }
149 .fileListName, .fileListName1, .fileListName3{ 130 .fileListName, .fileListName1, .fileListName3{
150 text-align: center; 131 text-align: center;
151 padding-top: 10px; 132 margin-top: 10px;
152 } 133 position: absolute;
153 .fileListName p , .fileListName1 p, .fileListName3 p{ 134 left: 0;
154 display: inline-block; 135 display: block;
155 height: 17px; 136 z-index: 30;
137 width: 100%;
138 cursor: pointer;
156 } 139 }
157 .fileListName a , .fileListName1 a, .fileListName3 a { 140 .fileListName span , .fileListName1 span, .fileListName3 span{
158 display: inline-block; 141 display: inline-block;
159 line-height: 14px; 142 color: #4a4a4a;
160 } 143 }
161 .fileListName a i, .fileListName1 a i, .fileListName3 a i{ 144 .fileListName img, .fileListName1 img, .fileListName3 img{
162 line-height: 14px; 145 float: right;
163 height: 14px; 146 margin-top: 5px;
164 padding: 0; 147 margin-left: 2px;
165 position: relative;
166 top: -2px;
167 font-size: 14px;
168 font-weight: 600;
169 } 148 }
170 .fileList tr, .fileList1 tr, .fileList3 tr { 149 .fileList tr, .fileList1 tr, .fileList3 tr {
171 line-height: 28px; 150 line-height: 28px;
...@@ -189,11 +168,11 @@ ...@@ -189,11 +168,11 @@
189 height: 16px; 168 height: 16px;
190 padding-left: 8px; 169 padding-left: 8px;
191 font-size: 16px; 170 font-size: 16px;
192 font-weight: 600;
193 margin-bottom: 15px; 171 margin-bottom: 15px;
194 position: relative; 172 position: relative;
195 border-bottom: 1px dotted #E6E6E6; 173 border-bottom: 1px dotted #E6E6E6;
196 padding-bottom: 15px; 174 padding-bottom: 20px;
175 color: #4A4A4A;
197 } 176 }
198 .acceptance_information h3::before , .person_info h3::before , .data_upload h3::before , .obtaining_license h3::before { 177 .acceptance_information h3::before , .person_info h3::before , .data_upload h3::before , .obtaining_license h3::before {
199 position:absolute; 178 position:absolute;
...@@ -237,45 +216,31 @@ ...@@ -237,45 +216,31 @@
237 } 216 }
238 .layui-icon-reduce-circle { 217 .layui-icon-reduce-circle {
239 font-size: 20px!important; 218 font-size: 20px!important;
219 color: #FA6400;
240 } 220 }
241 .add_form { 221 .add_form {
242 height: 80px; 222 height: 36px;
243 border: 2px dotted #d2d2d2; 223 border: 1px dotted #DEDEDE;
244 cursor: pointer; 224 cursor: pointer;
245 text-align: center; 225 text-align: center;
246 padding-top: 18px;
247 box-sizing: border-box; 226 box-sizing: border-box;
248 border-radius: 8px; 227 border-radius: 2px;
249 display: none; 228 display: none;
229 background: #FCFCFC;
250 } 230 }
251 .add_form:hover { 231 .add_form:hover {
252 border-color: #0091FF; 232 border-color: #0091FF;
253 } 233 }
254 .add_form i { 234 .add_form i {
255 font-size: 20px!important; 235 font-size: 16px!important;
256 }
257 .person_info h3 {
258 float: left;
259 margin-right: 10px;
260 }
261 .person_info .title {
262 line-height: 18px;
263 margin-bottom: 20px;
264 padding-left: 0!important;
265 }
266 .person_info .title input{
267 display: inline-block; 236 display: inline-block;
268 margin: 0 10px; 237 margin-top: 5px;
269 cursor: pointer; 238 color: #4A4A4A;
270 width: 21px;
271 height: 21px;
272 position: relative;
273 top: -2px;
274 } 239 }
275 .person_info .title p { 240 .add_form p {
276 display: inline-block; 241 display: inline-block;
277 position: relative; 242 color: #9B9B9B;
278 top: -6.5px; 243 line-height: 36px;
279 } 244 }
280 /* -----------------资料上传---------------------- */ 245 /* -----------------资料上传---------------------- */
281 .data_upload { 246 .data_upload {
...@@ -286,7 +251,7 @@ ...@@ -286,7 +251,7 @@
286 .record { 251 .record {
287 position: absolute; 252 position: absolute;
288 left: 0; 253 left: 0;
289 bottom: 30px; 254 bottom: 60px;
290 display: block; 255 display: block;
291 line-height: 20px; 256 line-height: 20px;
292 height: 20px; 257 height: 20px;
...@@ -327,4 +292,22 @@ ...@@ -327,4 +292,22 @@
327 } 292 }
328 .obtaining_license { 293 .obtaining_license {
329 margin-top: 20px; 294 margin-top: 20px;
295 }
296 .person_radio {
297 margin-bottom: 20px;
298 }
299 .person_radio input{
300 display: inline-block;
301 cursor: pointer;
302 width: 14px;
303 height: 14px;
304 position: relative;
305 top: -2px;
306 margin-right: 10px;
307 }
308 .person_radio p {
309 display: inline-block;
310 position: relative;
311 top: -3.5px;
312 margin-right: 10px;
330 } 313 }
...\ No newline at end of file ...\ No newline at end of file
......
1 $(function () { 1 $(function () {
2 //元素 2 //元素
3 var oFileInput = $("#fileInput"); //选择文件按钮 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 = []; //存放每个文件大小的数组，用来比较去重 4 var sizeObj = []; //存放每个文件大小的数组，用来比较去重
9 //拖拽外部文件，进入目标元素触发 5 // var oFileSpan = $("#fileSpan");
10 oFileSpan.on("dragenter", function () { 6 // //拖拽外部文件，进入目标元素触发
11 $(this).find('.file_name').css("background", "#ccc"); 7 // oFileSpan.on("dragenter", function () {
12 $(this).find('.file_name').empty(); 8 // $(this).find('.file_name').css("background", "#ccc");
13 $(this).find('.file_name').append( 9 // $(this).find('.file_name').empty();
14 '<p style="line-height:200px">可以方鼠标了</p>' 10 // $(this).find('.file_name').append(
15 ) 11 // '<p style="line-height:240px">可以方鼠标了</p>'
16 }); 12 // )
17 //拖拽外部文件，进入目标、离开目标之间，连续触发 13 // });
18 oFileSpan.on("dragover", function () { 14 // //拖拽外部文件，进入目标、离开目标之间，连续触发
19 return false; 15 // oFileSpan.on("dragover", function () {
20 }); 16 // return false;
21 //拖拽外部文件，离开目标元素触发 17 // });
22 oFileSpan.on("dragleave", function () { 18 // //拖拽外部文件，离开目标元素触发
23 $(this).find('.file_name').empty(); 19 // oFileSpan.on("dragleave", function () {
24 $(this).find('.file_name').css("background", "#ffff"); 20 // $(this).find('.file_name').empty();
25 $(this).find('.file_name').append( 21 // $(this).find('.file_name').css("background", "#ffff");
26 ' <i class="layui-icon layui-icon-addition"></i>' + 22 // $(this).find('.file_name').append(
27 '<p>点击或拖拽文件上传</p>' + 23 // '<img class="update" src="../staticImages/update.png">'+
28 '<div class="certificate">登记申请书（2份）</div>' + 24 // '<p class="updatetext">点击或拖拽文件上传</p>'+
29 '<div class="fileListName"></div>' 25 // '<div class="fileListName"></div>'
30 ) 26 // )
31 }); 27 // });
32 //拖拽外部文件，在目标元素上释放鼠标触发 28 // //拖拽外部文件，在目标元素上释放鼠标触发
33 oFileSpan.on("drop", function (ev) { 29 // oFileSpan.on("drop", function (ev) {
34 var fs = ev.originalEvent.dataTransfer.files; 30 // var fs = ev.originalEvent.dataTransfer.files;
35 $(this).find('.file_name').empty(); 31 // $(this).find('.file_name').empty();
36 $(this).find('.file_name').css("background", "#ffff"); 32 // $(this).find('.file_name').css("background", "#ffff");
37 $(this).find('.file_name').append( 33 // $(this).find('.file_name').append(
38 ' <i class="layui-icon layui-icon-addition"></i>' + 34 // '<img class="update" src="../staticImages/update.png">'+
39 '<p>点击或拖拽文件上传</p>' + 35 // '<p class="updatetext">点击或拖拽文件上传</p>'+
40 '<div class="certificate">登记申请书（2份）</div>' + 36 // '<div class="fileListName"></div>'
41 '<div class="fileListName"></div>' 37 // )
42 ) 38 // analysisList(fs); //解析列表函数
43 analysisList(fs); //解析列表函数 39 // return false;
44 return false; 40 // });
45 });
46 //点击选择文件按钮选文件 41 //点击选择文件按钮选文件
47 oFileInput.on("change", function () { 42 oFileInput.on("change", function () {
48 analysisList(this.files); 43 if(flieList.length>=2) {
44 layer.msg('已经完成上传最大限度', { icon: 5 });
45 return false
46 }else {
47 analysisList(this.files, oFileInput);
48 }
49 }) 49 })
50 //解析列表函数 50 //解析列表函数
51 function analysisList(obj) { 51 function analysisList(obj, inputName) {
52 //如果没有文件 52 //如果没有文件
53 if (obj.length < 1) { 53 if (obj.length < 1) {
54 return false; 54 return false;
...@@ -69,47 +69,42 @@ $(function () { ...@@ -69,47 +69,42 @@ $(function () {
69 return false; 69 return false;
70 } 70 }
71 //给json对象添加内容，得到选择的文件的数据 71 //给json对象添加内容，得到选择的文件的数据
72 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型 72 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
73 flieList.push(itemArr); 73 flieList.push(itemArr);
74 if (flieList.length==2){
75 inputName.parent().find('.update').attr('src','../staticImages/Yes.png');
76 inputName.parent().find('.updatetext').text('')
77 }
74 //把这个文件的大小放进数组中 78 //把这个文件的大小放进数组中
75 sizeObj.push(size); 79 sizeObj.push(size);
76 } 80 }
77 createList() //生成列表 81 createList() //生成列表
78 document.querySelector('#fileInput').value = null 82 document.querySelector('#fileInput').value = null
79 if (flieList.length == 2) {
80 oFileList_parent.show(); //表格显示
81 }
82 }; 83 };
83 //生成列表 84 //生成列表
84 function createList() { 85 function createList() {
85 oFileList.empty(); //先清空元素内容 86 $('.fileListName').empty()
86 for (var i = 0; i < flieList.length; i++) { 87 for (var i = 0; i < flieList.length; i++) {
87 var fileData = flieList[i]; //flieList数组中的某一个 88 var fileData = flieList[i];
88 var name = fileData[1]; //文件名 89 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( 90 $('.fileListName').append(
95 '<p class="fileName" title="' + name + '">' + name + '</p>' + 91 '<li class="fileName">'+
96 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>' 92 '<span title="' + name + '">' + name + '</span>' +
93 '<img class="operation" src="../staticImages/chacha.png">'+
94 '</li>'
97 ); 95 );
98 } 96 }
99 } 97 }
100 //删除表格行 98 $(document).on("click", ".fileListName .fileName .operation", function (e) {
101 oFileList.on("click", "a.operation", function () { 99 var index = $(this).parent().index();
102 console.log(666699) 100 flieList.splice(index, 1)
103 var oTr = $(this).parents("tr"); 101 sizeObj.splice(index, 1)
104 var index = oTr.index(); 102 if(flieList.length==1) {
105 oTr.remove(); //删除这一行 103 $(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../staticImages/update.png');
106 flieList.splice(index, 1); //删除数据 104 $(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
107 sizeObj.splice(index, 1); //删除文件大小数组中的项
108 if (flieList.length == 0) {
109 oFileList_parent.hide()
110 $('.fileListName').empty();
111 } 105 }
112 }); 106 $(this).parent().remove()
107 })
113 }) 108 })
114 //通过文件名，返回文件的后缀名 109 //通过文件名，返回文件的后缀名
115 function fileType(name) { 110 function fileType(name) {
......
1 $(function () { 1 $(function () {
2 //元素 2 //元素
3 var oFileInput = $("#fileInput1"); //选择文件按钮 3 var oFileInput1 = $("#fileInput1"); //选择文件按钮
4 var oFileSpan = $("#fileSpan1"); //选择文件框
5 var oFileList_parent = $(".fileList_parent1"); //表格
6 var fileListName = $('.fileListName1') //上传的数据列表
7 var oFileList = $(".fileList1"); //表格tbody
8 var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重 4 var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重
9 //拖拽外部文件，进入目标元素触发 5 // var oFileSpan = $("#fileSpan");
10 oFileSpan.on("dragenter", function () { 6 // //拖拽外部文件，进入目标元素触发
11 $(this).find('.file_name').css("background", "#ccc"); 7 // oFileSpan.on("dragenter", function () {
12 $(this).find('.file_name').empty(); 8 // $(this).find('.file_name').css("background", "#ccc");
13 $(this).find('.file_name').append( 9 // $(this).find('.file_name').empty();
14 '<p style="line-height:200px">可以方鼠标了</p>' 10 // $(this).find('.file_name').append(
15 ) 11 // '<p style="line-height:240px">可以方鼠标了</p>'
16 }); 12 // )
17 //拖拽外部文件，进入目标、离开目标之间，连续触发 13 // });
18 oFileSpan.on("dragover", function () { 14 // //拖拽外部文件，进入目标、离开目标之间，连续触发
19 return false; 15 // oFileSpan.on("dragover", function () {
20 }); 16 // return false;
21 //拖拽外部文件，离开目标元素触发 17 // });
22 oFileSpan.on("dragleave", function () { 18 // //拖拽外部文件，离开目标元素触发
23 $(this).find('.file_name').empty(); 19 // oFileSpan.on("dragleave", function () {
24 $(this).find('.file_name').css("background", "#ffff"); 20 // $(this).find('.file_name').empty();
25 $(this).find('.file_name').append( 21 // $(this).find('.file_name').css("background", "#ffff");
26 ' <i class="layui-icon layui-icon-addition"></i>' + 22 // $(this).find('.file_name').append(
27 '<p>点击或拖拽文件上传</p>' + 23 // '<img class="update" src="../staticImages/update.png">'+
28 '<div class="certificate">房屋所有权证书（2份）</div>' + 24 // '<p class="updatetext">点击或拖拽文件上传</p>'+
29 '<div class="fileListName1"></div>' 25 // '<div class="fileListName"></div>'
30 ) 26 // )
31 }); 27 // });
32 //拖拽外部文件，在目标元素上释放鼠标触发 28 // //拖拽外部文件，在目标元素上释放鼠标触发
33 oFileSpan.on("drop", function (ev) { 29 // oFileSpan.on("drop", function (ev) {
34 var fs = ev.originalEvent.dataTransfer.files; 30 // var fs = ev.originalEvent.dataTransfer.files;
35 $(this).find('.file_name').empty(); 31 // $(this).find('.file_name').empty();
36 $(this).find('.file_name').css("background", "#ffff"); 32 // $(this).find('.file_name').css("background", "#ffff");
37 $(this).find('.file_name').append( 33 // $(this).find('.file_name').append(
38 ' <i class="layui-icon layui-icon-addition"></i>' + 34 // '<img class="update" src="../staticImages/update.png">'+
39 '<p>点击或拖拽文件上传</p>' + 35 // '<p class="updatetext">点击或拖拽文件上传</p>'+
40 '<div class="certificate">房屋所有权证书（2份）</div>' + 36 // '<div class="fileListName"></div>'
41 '<div class="fileListName1"></div>' 37 // )
42 ) 38 // analysisList(fs); //解析列表函数
43 analysisList(fs); //解析列表函数 39 // return false;
44 return false; 40 // });
45 });
46 //点击选择文件按钮选文件 41 //点击选择文件按钮选文件
47 oFileInput.on("change", function () { 42 oFileInput1.on("change", function () {
48 analysisList(this.files); 43 if(flieList1.length>=2) {
44 layer.msg('已经完成上传最大限度', { icon: 5 });
45 return false
46 }else {
47 analysisList(this.files, oFileInput1);
48 }
49 }) 49 })
50 //解析列表函数 50 //解析列表函数
51 function analysisList(obj) { 51 function analysisList(obj, inputName) {
52 //如果没有文件 52 //如果没有文件
53 if (obj.length < 1) { 53 if (obj.length < 1) {
54 return false; 54 return false;
...@@ -69,46 +69,42 @@ $(function () { ...@@ -69,46 +69,42 @@ $(function () {
69 return false; 69 return false;
70 } 70 }
71 //给json对象添加内容，得到选择的文件的数据 71 //给json对象添加内容，得到选择的文件的数据
72 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型 72 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
73 flieList1.push(itemArr); 73 flieList1.push(itemArr);
74 if (flieList1.length==2){
75 inputName.parent().find('.update').attr('src','../staticImages/Yes.png');
76 inputName.parent().find('.updatetext').text('')
77 }
74 //把这个文件的大小放进数组中 78 //把这个文件的大小放进数组中
75 sizeObj1.push(size); 79 sizeObj1.push(size);
76 } 80 }
77 createList() //生成列表 81 createList() //生成列表
78 if (flieList1.length == 2) {
79 oFileList_parent.show(); //表格显示
80 }
81 document.querySelector('#fileInput1').value = null 82 document.querySelector('#fileInput1').value = null
82 }; 83 };
83 //生成列表 84 //生成列表
84 function createList() { 85 function createList() {
85 oFileList.empty(); //先清空元素内容 86 $('.fileListName1').empty()
86 for (var i = 0; i < flieList1.length; i++) { 87 for (var i = 0; i < flieList1.length; i++) {
87 var fileData = flieList1[i]; //flieList1数组中的某一个 88 var fileData = flieList1[i];
88 var name = fileData[1]; //文件名 89 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( 90 $('.fileListName1').append(
95 '<p class="fileName" title="' + name + '">' + name + '</p>' + 91 '<li class="fileName">'+
96 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>' 92 '<span title="' + name + '">' + name + '</span>' +
93 '<img class="operation" src="../staticImages/chacha.png">'+
94 '</li>'
97 ); 95 );
98 } 96 }
99 } 97 }
100 //删除表格行 98 $(document).on("click", ".fileListName1 .fileName .operation", function (e) {
101 oFileList.on("click", "a.operation", function () { 99 var index = $(this).parent().index();
102 var oTr = $(this).parents("tr"); 100 flieList1.splice(index, 1)
103 var index = oTr.index(); 101 sizeObj1.splice(index, 1)
104 oTr.remove(); //删除这一行 102 if(flieList1.length==1) {
105 flieList1.splice(index, 1); //删除数据 103 $(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../staticImages/update.png');
106 sizeObj1.splice(index, 1); //删除文件大小数组中的项 104 $(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
107 if (flieList1.length == 0) {
108 oFileList_parent.hide()
109 $('.fileListName1').empty();
110 } 105 }
111 }); 106 $(this).parent().remove()
107 })
112 }) 108 })
113 //通过文件名，返回文件的后缀名 109 //通过文件名，返回文件的后缀名
114 function fileType(name) { 110 function fileType(name) {
......
1 $(function () { 1 $(function () {
2 //元素 2 //元素
3 var oFileInput = $("#fileInput3"); //选择文件按钮 3 var oFileInput3 = $("#fileInput3"); //选择文件按钮
4 var oFileSpan = $("#fileSpan3"); //选择文件框
5 var oFileList_parent = $(".fileList_parent3"); //表格
6 var oFileList = $(".fileList3"); //表格tbody
7 var sizeObj3 = []; //存放每个文件大小的数组，用来比较去重 4 var sizeObj3 = []; //存放每个文件大小的数组，用来比较去重
8 //拖拽外部文件，进入目标元素触发 5 // var oFileSpan = $("#fileSpan");
9 oFileSpan.on("dragenter", function () { 6 // //拖拽外部文件，进入目标元素触发
10 $(this).find('.file_name').css("background", "#ccc"); 7 // oFileSpan.on("dragenter", function () {
11 $(this).find('.file_name').empty(); 8 // $(this).find('.file_name').css("background", "#ccc");
12 $(this).find('.file_name').append( 9 // $(this).find('.file_name').empty();
13 '<p style="line-height:200px">可以方鼠标了</p>' 10 // $(this).find('.file_name').append(
14 ) 11 // '<p style="line-height:240px">可以方鼠标了</p>'
15 }); 12 // )
16 //拖拽外部文件，进入目标、离开目标之间，连续触发 13 // });
17 oFileSpan.on("dragover", function () { 14 // //拖拽外部文件，进入目标、离开目标之间，连续触发
18 return false; 15 // oFileSpan.on("dragover", function () {
19 }); 16 // return false;
20 //拖拽外部文件，离开目标元素触发 17 // });
21 oFileSpan.on("dragleave", function () { 18 // //拖拽外部文件，离开目标元素触发
22 $(this).find('.file_name').empty(); 19 // oFileSpan.on("dragleave", function () {
23 $(this).find('.file_name').css("background", "#ffff"); 20 // $(this).find('.file_name').empty();
24 $(this).find('.file_name').append( 21 // $(this).find('.file_name').css("background", "#ffff");
25 ' <i class="layui-icon layui-icon-addition"></i>' + 22 // $(this).find('.file_name').append(
26 '<p>点击或拖拽文件上传</p>' + 23 // '<img class="update" src="../staticImages/update.png">'+
27 '<div class="certificate">房屋所有权证书（2份）</div>' + 24 // '<p class="updatetext">点击或拖拽文件上传</p>'+
28 '<div class="fileListName3"></div>' 25 // '<div class="fileListName"></div>'
29 ) 26 // )
30 }); 27 // });
31 //拖拽外部文件，在目标元素上释放鼠标触发 28 // //拖拽外部文件，在目标元素上释放鼠标触发
32 oFileSpan.on("drop", function (ev) { 29 // oFileSpan.on("drop", function (ev) {
33 var fs = ev.originalEvent.dataTransfer.files; 30 // var fs = ev.originalEvent.dataTransfer.files;
34 $(this).find('.file_name').empty(); 31 // $(this).find('.file_name').empty();
35 $(this).find('.file_name').css("background", "#ffff"); 32 // $(this).find('.file_name').css("background", "#ffff");
36 $(this).find('.file_name').append( 33 // $(this).find('.file_name').append(
37 ' <i class="layui-icon layui-icon-addition"></i>' + 34 // '<img class="update" src="../staticImages/update.png">'+
38 '<p>点击或拖拽文件上传</p>' + 35 // '<p class="updatetext">点击或拖拽文件上传</p>'+
39 '<div class="certificate">房屋所有权证书（2份）</div>' + 36 // '<div class="fileListName"></div>'
40 '<div class="fileListName3"></div>' 37 // )
41 ) 38 // analysisList(fs); //解析列表函数
42 analysisList(fs); //解析列表函数 39 // return false;
43 return false; 40 // });
44 });
45 //点击选择文件按钮选文件 41 //点击选择文件按钮选文件
46 oFileInput.on("change", function () { 42 oFileInput3.on("change", function () {
47 analysisList(this.files); 43 if(flieList3.length>=1) {
44 layer.msg('已经完成上传最大限度', { icon: 5 });
45 return false
46 }else {
47 analysisList(this.files, oFileInput3);
48 }
48 }) 49 })
49 //解析列表函数 50 //解析列表函数
50 function analysisList(obj) { 51 function analysisList(obj, inputName) {
51 //如果没有文件 52 //如果没有文件
52 if (obj.length < 1) { 53 if (obj.length < 1) {
53 return false; 54 return false;
...@@ -68,46 +69,40 @@ $(function () { ...@@ -68,46 +69,40 @@ $(function () {
68 return false; 69 return false;
69 } 70 }
70 //给json对象添加内容，得到选择的文件的数据 71 //给json对象添加内容，得到选择的文件的数据
71 var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型 72 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
72 flieList3.push(itemArr); 73 flieList3.push(itemArr);
74 if (flieList3.length==1){
75 inputName.parent().find('.update').attr('src','../staticImages/Yes.png');
76 inputName.parent().find('.updatetext').text('')
77 }
73 //把这个文件的大小放进数组中 78 //把这个文件的大小放进数组中
74 sizeObj3.push(size); 79 sizeObj3.push(size);
75 } 80 }
76 createList() //生成列表 81 createList() //生成列表
77 if (flieList3.length == 1) { 82 document.querySelector('#fileInput1').value = null
78 oFileList_parent.show(); //表格显示
79 }
80 document.querySelector('#fileInput3').value = null
81 }; 83 };
82 //生成列表 84 //生成列表
83 function createList() { 85 function createList() {
84 oFileList.empty(); //先清空元素内容 86 $('.fileListName3').empty()
85 for (var i = 0; i < flieList3.length; i++) { 87 for (var i = 0; i < flieList3.length; i++) {
86 var fileData = flieList3[i]; //flieList3数组中的某一个 88 var fileData = flieList3[i];
87 var name = fileData[1]; //文件名 89 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( 90 $('.fileListName3').append(
94 '<p class="fileName" title="' + name + '">' + name + '</p>' + 91 '<li class="fileName">'+
95 '<a class="operation"><i class="layui-icon layui-icon-close"></i></a>' 92 '<span title="' + name + '">' + name + '</span>' +
93 '<img class="operation" src="../staticImages/chacha.png">'+
94 '</li>'
96 ); 95 );
97 } 96 }
98 } 97 }
99 //删除表格行 98 $(document).on("click", ".fileListName3 .fileName .operation", function (e) {
100 oFileList.on("click", "a.operation", function () { 99 var index = $(this).parent().index();
101 var oTr = $(this).parents("tr"); 100 flieList3.splice(index, 1)
102 var index = oTr.index(); 101 sizeObj3.splice(index, 1)
103 oTr.remove(); //删除这一行 102 $(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../staticImages/update.png');
104 flieList3.splice(index, 1); //删除数据 103 $(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
105 sizeObj3.splice(index, 1); //删除文件大小数组中的项 104 $(this).parent().remove()
106 if (flieList3.length == 0) { 105 })
107 oFileList_parent.hide()
108 $('.fileListName3').empty();
109 }
110 });
111 }) 106 })
112 //通过文件名，返回文件的后缀名 107 //通过文件名，返回文件的后缀名
113 function fileType(name) { 108 function fileType(name) {
......
...@@ -62,8 +62,8 @@ ...@@ -62,8 +62,8 @@
62 </div> 62 </div>
63 <!-----------------买方信息------------------ --> 63 <!-----------------买方信息------------------ -->
64 <div class="person_info"> 64 <div class="person_info">
65 <div class="title"> 65 <h3>买方信息</h3>
66 <h3>买方信息</h3> 66 <div class="person_radio">
67 <input type="radio" class="radioInfo" name="1" value="1" checked> 67 <input type="radio" class="radioInfo" name="1" value="1" checked>
68 <p>单独所有</p> 68 <p>单独所有</p>
69 <input type="radio" class="radioInfo" name="1" value="2"> 69 <input type="radio" class="radioInfo" name="1" value="2">
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
105 </div><i class="layui-icon layui-icon-reduce-circle"></i> 105 </div><i class="layui-icon layui-icon-reduce-circle"></i>
106 </div> 106 </div>
107 </form> 107 </form>
108 <div class="add_form layui-bg-gray"> 108 <div class="add_form">
109 <i class="layui-icon layui-icon-addition"></i> 109 <i class="layui-icon layui-icon-addition"></i>
110 <p>添加个人信息</p> 110 <p>添加个人信息</p>
111 </div> 111 </div>
...@@ -115,64 +115,52 @@ ...@@ -115,64 +115,52 @@
115 <h3>资料上传</h3> 115 <h3>资料上传</h3>
116 <div class="img_update"> 116 <div class="img_update">
117 <div class="fileBox"> 117 <div class="fileBox">
118 <div id="fileSpan" class="vm"> 118 <div class="fileSpan vm">
119 <input type="file" multiple id="fileInput" /> 119 <input type="file" multiple id="fileInput" />
120 <div class="file_name"> 120 <div class="file_name">
121 <i class="layui-icon layui-icon-addition"></i> 121 <img class="update" src="../staticImages/update.png">
122 <p>点击或拖拽文件上传</p> 122 <p class="updatetext">点击文件上传</p>
123 <div class="fileListName"></div>
124 </div> 123 </div>
124 <div class="fileListName"></div>
125 </div> 125 </div>
126 <div class="certificate">登记申请书（2份）</div> 126 <div class="certificate">登记申请书（2份）</div>
127 </div> 127 </div>
128 <div class="fileList_parent">
129 <img src="../staticImages/dui.png">
130 <table width="150px" class="file_list">
131 <tbody class="fileList">
132 </table>
133 </div>
134 </div> 128 </div>
135 <!-- 房屋所有权证书 --> 129 <!-- 房屋所有权证书 -->
136 <div class="img_update"> 130 <div class="img_update">
137 <div class="fileBox"> 131 <div class="fileBox">
138 <div id="fileSpan1" class="vm"> 132 <div class="fileSpan vm">
139 <input type="file" multiple id="fileInput1" /> 133 <input type="file" multiple id="fileInput1" />
140 <div class="file_name"> 134 <div class="file_name">
141 <i class="layui-icon layui-icon-addition"></i> 135 <img class="update" src="../staticImages/update.png">
142 <p>点击或拖拽文件上传</p> 136 <p class="updatetext">点击文件上传</p>
143 <div class="fileListName1"></div>
144 </div> 137 </div>
138 <div class="fileListName1"></div>
145 </div> 139 </div>
146 <div class="certificate">房屋所有权证书（2份）</div> 140 <div class="certificate">房屋所有权证书（2份）</div>
147 </div> 141 </div>
148 <div class="fileList_parent1">
149 <img src="../staticImages/dui.png">
150 <table width="150px" class="file_list">
151 <tbody class="fileList1">
152 </table>
153 </div>
154 </div> 142 </div>
155 143
156 <!-- 询问笔录 --> 144 <!-- 询问笔录 -->
157 <div class="img_update"> 145 <div class="img_update">
158 <div class="fileBox"> 146 <div class="fileBox">
159 <div id="fileSpan3" class="vm"> 147 <div class="fileSpan vm">
160 <input type="file" multiple id="fileInput3" /> 148 <input type="file" multiple id="fileInput3" />
161 <div class="file_name"> 149 <div class="file_name">
162 <i class="layui-icon layui-icon-addition"></i> 150 <img class="update" src="../staticImages/update.png">
163 <p>点击或拖拽文件上传</p> 151 <p class="updatetext">点击文件上传</p>
164 <div class="fileListName3"></div>
165 </div> 152 </div>
153 <div class="fileListName3"></div>
166 <a class="record">下载模板</a> 154 <a class="record">下载模板</a>
167 </div> 155 </div>
168 <div class="certificate">询问笔录(1)份</div> 156 <div class="certificate">询问笔录(1)份</div>
169 </div> 157 </div>
170 <div class="fileList_parent3"> 158 <!-- <div class="fileList_parent3">
171 <img src="../staticImages/dui.png"> 159 <img src="../staticImages/Yes.png">
172 <table width="150px" class="file_list"> 160 <table width="150px" class="file_list">
173 <tbody class="fileList3"> 161 <tbody class="fileList3">
174 </table> 162 </table>
175 </div> 163 </div> -->
176 </div> 164 </div>
177 </div> 165 </div>
178 <!-- 领证方式 --> 166 <!-- 领证方式 -->
......