Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
0c2302c7 by 任超
Options

style:图片上传

1 parent 84050934
Inline Side-by-side
Showing 5 changed files with 48 additions and 250 deletions
...@@ -108,6 +108,7 @@ ...@@ -108,6 +108,7 @@
108 position: relative; 108 position: relative;
109 margin-right: 121px; 109 margin-right: 121px;
110 background: #FCFCFC; 110 background: #FCFCFC;
111 z-index: 10;
111 } 112 }
112 113
113 .fileSpan:hover { 114 .fileSpan:hover {
...@@ -400,3 +401,12 @@ input[type='file'] { ...@@ -400,3 +401,12 @@ input[type='file'] {
400 .layui-form-label { 401 .layui-form-label {
401 font-size: 14px; 402 font-size: 14px;
402 } 403 }
404 .pictureUpload {
405 width: 240px;
406 height: 240px;
407 z-index: 12;
408 position: absolute;
409 left: 0;
410 top: 0;
411 display: none;
412 }
...\ No newline at end of file ...\ No newline at end of file
......
1 $(function () {
2 //元素
3 var oFileInput1 = $("#fileInput1"); //选择文件按钮
4 var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重
5 //点击选择文件按钮选文件
6 oFileInput1.on("change", function () {
7 if(flieList1.length>=2) {
8 layer.msg('已经完成上传最大限度', { icon: 5 });
9 return false
10 }else {
11 console.log(this.files)
12 analysisList(this.files, oFileInput1);
13 }
14 })
15 //解析列表函数
16 function analysisList(obj, inputName) {
17 //如果没有文件
18 if (obj.length < 1) {
19 return false;
20 }
21 console.log(999999999, obj)
22 for (var i = 0; i < obj.length; i++) {
23 var fileObj = obj[i]; //单个文件
24 var name = fileObj.name; //文件名
25 var size = fileObj.size; //文件大小
26 var type = fileType(name); //文件类型，获取的是文件的后缀
27 //文件大于30M，就不上传
28 if (size > 1024 * 1024 * 1024 || size == 0) {
29 layer.msg('超过了30M，不能上传', { icon: 5 });
30 return false;
31 }
32 //把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
33 if (sizeObj1.indexOf(size) != -1) {
34 layer.msg('已经选择，不能重复上传', { icon: 5 });
35 return false;
36 }
37 //给json对象添加内容，得到选择的文件的数据
38 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
39 flieList1.push(itemArr);
40 if (flieList1.length==2){
41 inputName.parent().find('.update').attr('src','../../staticImages/Yes.png');
42 inputName.parent().find('.updatetext').text('')
43 }
44 //把这个文件的大小放进数组中
45 sizeObj1.push(size);
46 }
47 createList() //生成列表
48 document.querySelector('#fileInput1').value = null
49 };
50 //生成列表
51 function createList() {
52 $('.fileListName1').empty()
53 for (var i = 0; i < flieList1.length; i++) {
54 var fileData = flieList1[i];
55 name = fileData[1]
56 $('.fileListName1').append(
57 '<li class="fileName">'+
58 '<span title="' + name + '">' + name + '</span>' +
59 '<img class="operation" src="../../staticImages/chacha.png">'+
60 '</li>'
61 );
62 }
63 }
64 $(document).on("click", ".fileListName1 .fileName .operation", function (e) {
65 var index = $(this).parent().index();
66 flieList1.splice(index, 1)
67 sizeObj1.splice(index, 1)
68 if(flieList1.length==1) {
69 $(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../../staticImages/update.png');
70 $(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
71 }
72 $(this).parent().remove()
73 })
74 })
75 //通过文件名，返回文件的后缀名
76 function fileType(name) {
77 var nameArr = name.split(".");
78 return nameArr[nameArr.length - 1].toLowerCase();
79 }
80
1 $(function () {
2 //元素
3 var oFileInput3 = $("#fileInput3"); //选择文件按钮
4 var sizeObj3 = []; //存放每个文件大小的数组，用来比较去重
5 // var oFileSpan = $("#fileSpan");
6 // //拖拽外部文件，进入目标元素触发
7 // oFileSpan.on("dragenter", function () {
8 // $(this).find('.file_name').css("background", "#ccc");
9 // $(this).find('.file_name').empty();
10 // $(this).find('.file_name').append(
11 // '<p style="line-height:240px">可以方鼠标了</p>'
12 // )
13 // });
14 // //拖拽外部文件，进入目标、离开目标之间，连续触发
15 // oFileSpan.on("dragover", function () {
16 // return false;
17 // });
18 // //拖拽外部文件，离开目标元素触发
19 // oFileSpan.on("dragleave", function () {
20 // $(this).find('.file_name').empty();
21 // $(this).find('.file_name').css("background", "#ffff");
22 // $(this).find('.file_name').append(
23 // '<img class="update" src="../staticImages/update.png">'+
24 // '<p class="updatetext">点击或拖拽文件上传</p>'+
25 // '<div class="fileListName"></div>'
26 // )
27 // });
28 // //拖拽外部文件，在目标元素上释放鼠标触发
29 // oFileSpan.on("drop", function (ev) {
30 // var fs = ev.originalEvent.dataTransfer.files;
31 // $(this).find('.file_name').empty();
32 // $(this).find('.file_name').css("background", "#ffff");
33 // $(this).find('.file_name').append(
34 // '<img class="update" src="../staticImages/update.png">'+
35 // '<p class="updatetext">点击或拖拽文件上传</p>'+
36 // '<div class="fileListName"></div>'
37 // )
38 // analysisList(fs); //解析列表函数
39 // return false;
40 // });
41 //点击选择文件按钮选文件
42 oFileInput3.on("change", function () {
43 if(flieList3.length>=1) {
44 layer.msg('已经完成上传最大限度', { icon: 5 });
45 return false
46 }else {
47 analysisList(this.files, oFileInput3);
48 }
49 })
50 //解析列表函数
51 function analysisList(obj, inputName) {
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 (sizeObj3.indexOf(size) != -1) {
68 layer.msg('已经选择，不能重复上传', { icon: 5 });
69 return false;
70 }
71 //给json对象添加内容，得到选择的文件的数据
72 var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
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 }
78 //把这个文件的大小放进数组中
79 sizeObj3.push(size);
80 }
81 createList() //生成列表
82 document.querySelector('#fileInput1').value = null
83 };
84 //生成列表
85 function createList() {
86 $('.fileListName3').empty()
87 for (var i = 0; i < flieList3.length; i++) {
88 var fileData = flieList3[i];
89 name = fileData[1]
90 $('.fileListName3').append(
91 '<li class="fileName">'+
92 '<span title="' + name + '">' + name + '</span>' +
93 '<img class="operation" src="../staticImages/chacha.png">'+
94 '</li>'
95 );
96 }
97 }
98 $(document).on("click", ".fileListName3 .fileName .operation", function (e) {
99 var index = $(this).parent().index();
100 flieList3.splice(index, 1)
101 sizeObj3.splice(index, 1)
102 $(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../staticImages/update.png');
103 $(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
104 $(this).parent().remove()
105 })
106 })
107 //通过文件名，返回文件的后缀名
108 function fileType(name) {
109 var nameArr = name.split(".");
110 return nameArr[nameArr.length - 1].toLowerCase();
111 }
112
1 var slsqxx; 1 var slsqxx;
2 // 材料标识吗
3 var bsmCl;
2 $(function () { 4 $(function () {
3 //设置步骤条信息 5 //设置步骤条信息
4 setAcceptFlow(GetQueryString('bsm_slsq'), GetQueryString('businessno')); 6 setAcceptFlow(GetQueryString('bsm_slsq'), GetQueryString('businessno'));
...@@ -94,16 +96,6 @@ $('.add_form').click(function () { ...@@ -94,16 +96,6 @@ $('.add_form').click(function () {
94 $('.record').click(function (event) { 96 $('.record').click(function (event) {
95 event.stopPropagation(); 97 event.stopPropagation();
96 }) 98 })
97 var flieList1 = []; // 房屋所有权证书列表
98 var flieList3 = []; // 询问笔录
99 // 省市区
100 //config的设置是全局的
101 layui.config({
102 base: '../staticJs/'
103 }).extend({ //设定模块别名
104 common: 'cityCommon'
105 });
106
107 layui.use(['form', 'common'], function () { 99 layui.use(['form', 'common'], function () {
108 var common = layui.common, 100 var common = layui.common,
109 form = layui.form; 101 form = layui.form;
...@@ -135,31 +127,6 @@ function skipClick() { ...@@ -135,31 +127,6 @@ function skipClick() {
135 // skipNextPage(GetQueryString('bsm_slsq'),GetQueryString('businessno')); 127 // skipNextPage(GetQueryString('bsm_slsq'),GetQueryString('businessno'));
136 _uploadSlcl(flieList) 128 _uploadSlcl(flieList)
137 } 129 }
138 // // 图片上传
139 // function _uploadSlcl(flieList) {
140 // var formData = new FormData();
141 // formData.append('bsmCl', 'f5a9ffcff962ed17a393b1cacec4d4bd');
142 // flieList.map((item, index) => {
143 // console.log(item[0])
144 // formData.append('files', item[0]); //添加图片信息的参数
145 // })
146 // console.log(formData)
147 // $.ajax({
148 // type: "post", //提交方式
149 // url: portal.api_url + "/portal/FillInformation/uploadSlcl",//路径
150 // dataType: "json",
151 // cache: false, //上传文件不需要缓存
152 // processData: false, // 告诉jQuery不要去处理发送的数据
153 // contentType: false, // 告诉jQuery不要去设置Content-Type请求头
154 // data: formData,
155 // //数据，这里使用的是Json格式进行传输
156 // success: function (result) {//返回数据根据结果进行相应的处理
157 // if (result.code == 200) {
158 // console.log(result.data)
159 // }
160 // }
161 // });
162 // }
163 130
164 function LoadClxxDiv() { 131 function LoadClxxDiv() {
165 let clxxDic = $("#clxx"); 132 let clxxDic = $("#clxx");
...@@ -168,7 +135,8 @@ function LoadClxxDiv() { ...@@ -168,7 +135,8 @@ function LoadClxxDiv() {
168 clxxContent = '<div class="img_update">'; 135 clxxContent = '<div class="img_update">';
169 clxxContent += '<div class="fileBox">'; 136 clxxContent += '<div class="fileBox">';
170 clxxContent += '<div class="fileSpan vm">'; 137 clxxContent += '<div class="fileSpan vm">';
171 clxxContent += '<input type="file" multiple id="fileInput' + index + '" onchange="handleUpdate(this,' + index + ')"/>'; 138 clxxContent += '<input type="file" multiple id="fileInput' + index + '" onchange="handleUpdate(this,' + index + ', '+slsqxx.slclList[index].fs+')"/>';
139 clxxContent += '<div class="pictureUpload"></div>';
172 clxxContent += '<div class="file_name">'; 140 clxxContent += '<div class="file_name">';
173 clxxContent += '<img class="update" src="../../staticImages/update.png">'; 141 clxxContent += '<img class="update" src="../../staticImages/update.png">';
174 clxxContent += '<p class="updatetext">点击文件上传</p>'; 142 clxxContent += '<p class="updatetext">点击文件上传</p>';
...@@ -182,14 +150,46 @@ function LoadClxxDiv() { ...@@ -182,14 +150,46 @@ function LoadClxxDiv() {
182 }); 150 });
183 } 151 }
184 152
185 function handleUpdate(e, index) { 153 function handleUpdate(e, index, sizeNum) {
186 let fileobj = $("#fileInput" + index);
187 let name = e.files[0].name; 154 let name = e.files[0].name;
188 let fileul = $("#fileULName" + index); 155 let fileul = $("#fileULName" + index);
189 if (fileul.find("li").length >= slsqxx.slclList[index].fs) { 156 if (fileul.find("li").length >= slsqxx.slclList[index].fs) {
190 layer.msg('已经完成上传最大限度', { icon: 5 }); 157 layer.msg('已经完成上传最大限度', { icon: 5 });
191 return false 158 return false
192 } else { 159 } else {
160 _uploadSlcl(e.files[0], slsqxx.slclList[index].bsmCl, $("#fileULName" + index), sizeNum);
193 fileul.append('<li class="fileName">' + '<span title="' + name + '">' + name + '</span>' + '<img class="operation" src="../../staticImages/chacha.png">' + '</li>'); 161 fileul.append('<li class="fileName">' + '<span title="' + name + '">' + name + '</span>' + '<img class="operation" src="../../staticImages/chacha.png">' + '</li>');
194 } 162 }
195 } 163 }
164 $(document).on("click", ".fileListName .fileName .operation", function (e) {
165 $(this).parent().remove();
166 })
167 // // 图片上传
168 function _uploadSlcl(flieList, bsmCl, fileul, sizeNum) {
169 var formData = new FormData();
170 formData.append('bsmCl', bsmCl);
171 formData.append('files', flieList);
172 $.ajax({
173 type: "post", //提交方式
174 url: portal.api_url + "/portal/FillInformation/uploadSlcl",//路径
175 dataType: "json",
176 cache: false, //上传文件不需要缓存
177 processData: false, // 告诉jQuery不要去处理发送的数据
178 contentType: false, // 告诉jQuery不要去设置Content-Type请求头
179 data: formData,
180 //数据，这里使用的是Json格式进行传输
181 success: function (result) {//返回数据根据结果进行相应的处理
182 if (result.code == 200) {
183
184 console.log(fileul.find('.fileName').length , sizeNum)
185 if (fileul.find('.fileName').length === sizeNum) {
186 fileul.parent().find('.pictureUpload').show()
187 layer.msg('上传成功,并且以上传最大限度!');
188 fileul.parent().find('.file_name').css("z-index","15");
189 }else {
190 layer.msg('上传成功!');
191 }
192 }
193 }
194 });
195 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -127,22 +127,6 @@ ...@@ -127,22 +127,6 @@
127 <div class="certificate">登记申请书（2份）</div> 127 <div class="certificate">登记申请书（2份）</div>
128 </div> 128 </div>
129 </div> --> 129 </div> -->
130 <!-- 房屋所有权证书 -->
131 <!-- <div class="img_update">
132 <div class="fileBox">
133 <div class="fileSpan vm">
134 <input type="file" multiple id="fileInput1" onclick="" onchange="handleUpdate(this,'fileInput1')"/>
135 <div class="file_name">
136 <img class="update" src="../../staticImages/update.png">
137 <p class="updatetext">点击文件上传</p>
138 </div>
139 <div class="fileListName"></div>
140 </div>
141 <div class="certificate">房屋所有权证书（2份）</div>
142 </div>
143 </div> -->
144 <!-- 询问笔录 -->
145
146 </div> 130 </div>
147 <div class="next_button submitButton"> 131 <div class="next_button submitButton">
148 <button type="button" class="layui-btn layui-btn-normal" onclick="skipClick()"> 132 <button type="button" class="layui-btn layui-btn-normal" onclick="skipClick()">
...@@ -156,11 +140,7 @@ ...@@ -156,11 +140,7 @@
156 <script type="text/javascript" src="../../staticJs/onlineApply/workFlow.js"></script> 140 <script type="text/javascript" src="../../staticJs/onlineApply/workFlow.js"></script>
157 <script type="text/javascript" src="../../staticJs/onlineApply/houseFill.js"></script> 141 <script type="text/javascript" src="../../staticJs/onlineApply/houseFill.js"></script>
158 <!-- <script type="text/javascript" src="../../staticJs/imageUpdate.js"></script> --> 142 <!-- <script type="text/javascript" src="../../staticJs/imageUpdate.js"></script> -->
159 <!-- <script type="text/javascript" src="../../staticJs/city-picker.js"></script> -->
160 <script type="text/javascript" src="../../staticJs/down.js"></script> 143 <script type="text/javascript" src="../../staticJs/down.js"></script>
161 <!-- <script type="text/html" id="barDemo">
162 <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
163 </script> -->
164 </html> 144 </html>
165 145
166 <!-- <div class="img_update"> 146 <!-- <div class="img_update">
......