Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
7451b01f by 焦小希
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/renchao/portalStaticPage

2 parents 2e86acd6 5c68b3ad
Inline Side-by-side
Showing 5 changed files with 46 additions and 250 deletions
......@@ -108,6 +108,7 @@
position: relative;
margin-right: 121px;
background: #FCFCFC;
z-index: 10;
}
.fileSpan:hover {
......@@ -399,4 +400,13 @@ input[type='file'] {
.layui-form-label {
font-size: 14px;
}
.pictureUpload {
width: 240px;
height: 240px;
z-index: 12;
position: absolute;
left: 0;
top: 0;
display: none;
}
\ No newline at end of file
......
$(function () {
//元素
var oFileInput1 = $("#fileInput1"); //选择文件按钮
var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重
//点击选择文件按钮选文件
oFileInput1.on("change", function () {
if(flieList1.length>=2) {
layer.msg('已经完成上传最大限度', { icon: 5 });
return false
}else {
console.log(this.files)
analysisList(this.files, oFileInput1);
}
})
//解析列表函数
function analysisList(obj, inputName) {
//如果没有文件
if (obj.length < 1) {
return false;
}
console.log(999999999, obj)
for (var i = 0; i < obj.length; i++) {
var fileObj = obj[i]; //单个文件
var name = fileObj.name; //文件名
var size = fileObj.size; //文件大小
var type = fileType(name); //文件类型，获取的是文件的后缀
//文件大于30M，就不上传
if (size > 1024 * 1024 * 1024 || size == 0) {
layer.msg('超过了30M，不能上传', { icon: 5 });
return false;
}
//把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
if (sizeObj1.indexOf(size) != -1) {
layer.msg('已经选择，不能重复上传', { icon: 5 });
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
flieList1.push(itemArr);
if (flieList1.length==2){
inputName.parent().find('.update').attr('src','../../staticImages/Yes.png');
inputName.parent().find('.updatetext').text('')
}
//把这个文件的大小放进数组中
sizeObj1.push(size);
}
createList() //生成列表
document.querySelector('#fileInput1').value = null
};
//生成列表
function createList() {
$('.fileListName1').empty()
for (var i = 0; i < flieList1.length; i++) {
var fileData = flieList1[i];
name = fileData[1]
$('.fileListName1').append(
'<li class="fileName">'+
'<span title="' + name + '">' + name + '</span>' +
'<img class="operation" src="../../staticImages/chacha.png">'+
'</li>'
);
}
}
$(document).on("click", ".fileListName1 .fileName .operation", function (e) {
var index = $(this).parent().index();
flieList1.splice(index, 1)
sizeObj1.splice(index, 1)
if(flieList1.length==1) {
$(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../../staticImages/update.png');
$(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
}
$(this).parent().remove()
})
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
$(function () {
//元素
var oFileInput3 = $("#fileInput3"); //选择文件按钮
var sizeObj3 = []; //存放每个文件大小的数组，用来比较去重
// var oFileSpan = $("#fileSpan");
// //拖拽外部文件，进入目标元素触发
// oFileSpan.on("dragenter", function () {
// $(this).find('.file_name').css("background", "#ccc");
// $(this).find('.file_name').empty();
// $(this).find('.file_name').append(
// '<p style="line-height:240px">可以方鼠标了</p>'
// )
// });
// //拖拽外部文件，进入目标、离开目标之间，连续触发
// oFileSpan.on("dragover", function () {
// return false;
// });
// //拖拽外部文件，离开目标元素触发
// oFileSpan.on("dragleave", function () {
// $(this).find('.file_name').empty();
// $(this).find('.file_name').css("background", "#ffff");
// $(this).find('.file_name').append(
// '<img class="update" src="../staticImages/update.png">'+
// '<p class="updatetext">点击或拖拽文件上传</p>'+
// '<div class="fileListName"></div>'
// )
// });
// //拖拽外部文件，在目标元素上释放鼠标触发
// oFileSpan.on("drop", function (ev) {
// var fs = ev.originalEvent.dataTransfer.files;
// $(this).find('.file_name').empty();
// $(this).find('.file_name').css("background", "#ffff");
// $(this).find('.file_name').append(
// '<img class="update" src="../staticImages/update.png">'+
// '<p class="updatetext">点击或拖拽文件上传</p>'+
// '<div class="fileListName"></div>'
// )
// analysisList(fs); //解析列表函数
// return false;
// });
//点击选择文件按钮选文件
oFileInput3.on("change", function () {
if(flieList3.length>=1) {
layer.msg('已经完成上传最大限度', { icon: 5 });
return false
}else {
analysisList(this.files, oFileInput3);
}
})
//解析列表函数
function analysisList(obj, inputName) {
//如果没有文件
if (obj.length < 1) {
return false;
}
for (var i = 0; i < obj.length; i++) {
var fileObj = obj[i]; //单个文件
var name = fileObj.name; //文件名
var size = fileObj.size; //文件大小
var type = fileType(name); //文件类型，获取的是文件的后缀
//文件大于30M，就不上传
if (size > 1024 * 1024 * 1024 || size == 0) {
layer.msg('超过了30M，不能上传', { icon: 5 });
return false;
}
//把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
if (sizeObj3.indexOf(size) != -1) {
layer.msg('已经选择，不能重复上传', { icon: 5 });
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
flieList3.push(itemArr);
if (flieList3.length==1){
inputName.parent().find('.update').attr('src','../staticImages/Yes.png');
inputName.parent().find('.updatetext').text('')
}
//把这个文件的大小放进数组中
sizeObj3.push(size);
}
createList() //生成列表
document.querySelector('#fileInput1').value = null
};
//生成列表
function createList() {
$('.fileListName3').empty()
for (var i = 0; i < flieList3.length; i++) {
var fileData = flieList3[i];
name = fileData[1]
$('.fileListName3').append(
'<li class="fileName">'+
'<span title="' + name + '">' + name + '</span>' +
'<img class="operation" src="../staticImages/chacha.png">'+
'</li>'
);
}
}
$(document).on("click", ".fileListName3 .fileName .operation", function (e) {
var index = $(this).parent().index();
flieList3.splice(index, 1)
sizeObj3.splice(index, 1)
$(this).parent().parent().parent('.fileSpan').find('.update').attr('src','../staticImages/update.png');
$(this).parent().parent().parent('.fileSpan').find('.updatetext').text('点击文件上传')
$(this).parent().remove()
})
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
var slsqxx;
// 材料标识吗
var bsmCl;
$(function () {
//设置步骤条信息
setAcceptFlow(GetQueryString('bsm_slsq'), GetQueryString('businessno'));
......@@ -94,16 +96,6 @@ $('.add_form').click(function () {
$('.record').click(function (event) {
event.stopPropagation();
})
var flieList1 = []; // 房屋所有权证书列表
var flieList3 = []; // 询问笔录
// 省市区
//config的设置是全局的
layui.config({
base: '../staticJs/'
}).extend({ //设定模块别名
common: 'cityCommon'
});
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
......@@ -135,31 +127,6 @@ function skipClick() {
// skipNextPage(GetQueryString('bsm_slsq'),GetQueryString('businessno'));
_uploadSlcl(flieList)
}
// // 图片上传
// function _uploadSlcl(flieList) {
// var formData = new FormData();
// formData.append('bsmCl', 'f5a9ffcff962ed17a393b1cacec4d4bd');
// flieList.map((item, index) => {
// console.log(item[0])
// formData.append('files', item[0]); //添加图片信息的参数
// })
// console.log(formData)
// $.ajax({
// type: "post", //提交方式
// url: portal.api_url + "/portal/FillInformation/uploadSlcl",//路径
// dataType: "json",
// cache: false, //上传文件不需要缓存
// processData: false, // 告诉jQuery不要去处理发送的数据
// contentType: false, // 告诉jQuery不要去设置Content-Type请求头
// data: formData,
// //数据，这里使用的是Json格式进行传输
// success: function (result) {//返回数据根据结果进行相应的处理
// if (result.code == 200) {
// console.log(result.data)
// }
// }
// });
// }
function LoadClxxDiv() {
let clxxDic = $("#clxx");
......@@ -168,7 +135,8 @@ function LoadClxxDiv() {
clxxContent = '<div class="img_update">';
clxxContent += '<div class="fileBox">';
clxxContent += '<div class="fileSpan vm">';
clxxContent += '<input type="file" multiple id="fileInput' + index + '" onchange="handleUpdate(this,' + index + ')"/>';
clxxContent += '<input type="file" multiple id="fileInput' + index + '" onchange="handleUpdate(this,' + index + ', '+slsqxx.slclList[index].fs+')"/>';
clxxContent += '<div class="pictureUpload"></div>';
clxxContent += '<div class="file_name">';
clxxContent += '<img class="update" src="../../staticImages/update.png">';
clxxContent += '<p class="updatetext">点击文件上传</p>';
......@@ -182,14 +150,44 @@ function LoadClxxDiv() {
});
}
function handleUpdate(e, index) {
let fileobj = $("#fileInput" + index);
function handleUpdate(e, index, sizeNum) {
let name = e.files[0].name;
let fileul = $("#fileULName" + index);
if (fileul.find("li").length >= slsqxx.slclList[index].fs) {
layer.msg('已经完成上传最大限度', { icon: 5 });
return false
} else {
_uploadSlcl(e.files[0], slsqxx.slclList[index].bsmCl, $("#fileULName" + index), sizeNum);
fileul.append('<li class="fileName">' + '<span title="' + name + '">' + name + '</span>' + '<img class="operation" src="../../staticImages/chacha.png">' + '</li>');
}
}
$(document).on("click", ".fileListName .fileName .operation", function (e) {
$(this).parent().remove();
})
// // 图片上传
function _uploadSlcl(flieList, bsmCl, fileul, sizeNum) {
var formData = new FormData();
formData.append('bsmCl', bsmCl);
formData.append('files', flieList);
$.ajax({
type: "post", //提交方式
url: portal.api_url + "/portal/FillInformation/uploadSlcl",//路径
dataType: "json",
cache: false, //上传文件不需要缓存
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
data: formData,
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
if (fileul.find('.fileName').length === sizeNum) {
fileul.parent().find('.pictureUpload').show()
layer.msg('上传成功,并且以上传最大限度!');
fileul.parent().find('.file_name').css("z-index","15");
}else {
layer.msg('上传成功!');
}
}
}
});
}
\ No newline at end of file
......
......@@ -127,22 +127,6 @@
<div class="certificate">登记申请书（2份）</div>
</div>
</div> -->
<!-- 房屋所有权证书 -->
<!-- <div class="img_update">
<div class="fileBox">
<div class="fileSpan vm">
<input type="file" multiple id="fileInput1" onclick="" onchange="handleUpdate(this,'fileInput1')"/>
<div class="file_name">
<img class="update" src="../../staticImages/update.png">
<p class="updatetext">点击文件上传</p>
</div>
<div class="fileListName"></div>
</div>
<div class="certificate">房屋所有权证书（2份）</div>
</div>
</div> -->
<!-- 询问笔录 -->
</div>
<div class="next_button submitButton">
<button type="button" class="layui-btn layui-btn-normal" onclick="skipClick()">
......@@ -156,11 +140,7 @@
<script type="text/javascript" src="../../staticJs/onlineApply/workFlow.js"></script>
<script type="text/javascript" src="../../staticJs/onlineApply/houseFill.js"></script>
<!-- <script type="text/javascript" src="../../staticJs/imageUpdate.js"></script> -->
<!-- <script type="text/javascript" src="../../staticJs/city-picker.js"></script> -->
<script type="text/javascript" src="../../staticJs/down.js"></script>
<!-- <script type="text/html" id="barDemo">
<i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
</script> -->
</html>
<!-- <div class="img_update">
......