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 @@
.fileBox{
margin:10px;float: left;
}
.file_name i {
.file_name .update {
display: block;
font-size: 32px;
width: 24px;
height: 24px;
position: relative;
line-height: 24px;
top: -10px;
padding-top: 60px;
margin-bottom: 10px;
margin: 0 auto;
margin-top: 85px;
margin-bottom: 10px;
}
.file_name p {
line-height: 16px;
color: #9B9B9B;
}
.certificate {
height: 24px;
......@@ -83,16 +82,19 @@
font-size: 14px;
line-height: 24px;
text-align: center;
width: 240px;
}
#fileSpan , #fileSpan1, #fileSpan3{
.fileSpan{
display: inline-block;
width: 285px;
height: 200px;
width: 240px;
height: 240px;
border: 2px dashed #ccc;
text-align: center;
position: relative;
margin-right: 121px;
background: #FCFCFC;
}
#fileSpan:hover , #fileSpan1:hover, #fileSpan3:hover{
.fileSpan:hover{
border-color:#0091FF;
}
#fileInput, #fileInput1, #fileInput3{
......@@ -105,67 +107,44 @@
cursor: pointer;
z-index: 10;
}
.fileList_parent, .fileList_parent1, .fileList_parent3{
position: absolute;
left: 12px;
top: 12px;
width: 285px;
height: 200px;
text-align: center;
box-sizing: border-box;
padding: 30px 20px;
display: none;
background-color: #eee;
z-index: 20;
}
.fileName {
width: 80px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file_list {
text-align: center;
margin: 0 auto;
width: 102px;
}
.fileList_parent img , .fileList_parent1 img, .fileList_parent3 img{
width: 50px;
height: 60px;
}
.fileList_parent, .fileList_parent1, .fileList_parent3 {
float: left;
.fileName span {
display: inline-block;
width: 85px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file_name {
height: 200px;
text-align: center;
line-height: 200px;
position: relative;
}
.operation {
color: #0091FF;
cursor: pointer;
width: 14px;
height: 14px;
}
.fileListName, .fileListName1, .fileListName3{
text-align: center;
padding-top: 10px;
}
.fileListName p , .fileListName1 p, .fileListName3 p{
display: inline-block;
height: 17px;
margin-top: 10px;
position: absolute;
left: 0;
display: block;
z-index: 30;
width: 100%;
cursor: pointer;
}
.fileListName a , .fileListName1 a, .fileListName3 a {
.fileListName span , .fileListName1 span, .fileListName3 span{
display: inline-block;
line-height: 14px;
color: #4a4a4a;
}
.fileListName a i, .fileListName1 a i, .fileListName3 a i{
line-height: 14px;
height: 14px;
padding: 0;
position: relative;
top: -2px;
font-size: 14px;
font-weight: 600;
.fileListName img, .fileListName1 img, .fileListName3 img{
float: right;
margin-top: 5px;
margin-left: 2px;
}
.fileList tr, .fileList1 tr, .fileList3 tr {
line-height: 28px;
......@@ -189,11 +168,11 @@
height: 16px;
padding-left: 8px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
position: relative;
border-bottom: 1px dotted #E6E6E6;
padding-bottom: 15px;
padding-bottom: 20px;
color: #4A4A4A;
}
.acceptance_information h3::before , .person_info h3::before , .data_upload h3::before , .obtaining_license h3::before {
position:absolute;
......@@ -237,45 +216,31 @@
}
.layui-icon-reduce-circle {
font-size: 20px!important;
color: #FA6400;
}
.add_form {
height: 80px;
border: 2px dotted #d2d2d2;
height: 36px;
border: 1px dotted #DEDEDE;
cursor: pointer;
text-align: center;
padding-top: 18px;
box-sizing: border-box;
border-radius: 8px;
border-radius: 2px;
display: none;
background: #FCFCFC;
}
.add_form:hover {
border-color: #0091FF;
}
.add_form i {
font-size: 20px!important;
}
.person_info h3 {
float: left;
margin-right: 10px;
}
.person_info .title {
line-height: 18px;
margin-bottom: 20px;
padding-left: 0!important;
}
.person_info .title input{
font-size: 16px!important;
display: inline-block;
margin: 0 10px;
cursor: pointer;
width: 21px;
height: 21px;
position: relative;
top: -2px;
margin-top: 5px;
color: #4A4A4A;
}
.person_info .title p {
.add_form p {
display: inline-block;
position: relative;
top: -6.5px;
color: #9B9B9B;
line-height: 36px;
}
/* -----------------资料上传---------------------- */
.data_upload {
......@@ -286,7 +251,7 @@
.record {
position: absolute;
left: 0;
bottom: 30px;
bottom: 60px;
display: block;
line-height: 20px;
height: 20px;
......@@ -327,4 +292,22 @@
}
.obtaining_license {
margin-top: 20px;
}
.person_radio {
margin-bottom: 20px;
}
.person_radio input{
display: inline-block;
cursor: pointer;
width: 14px;
height: 14px;
position: relative;
top: -2px;
margin-right: 10px;
}
.person_radio p {
display: inline-block;
position: relative;
top: -3.5px;
margin-right: 10px;
}
\ No newline at end of file
......
$(function () {
//元素
var oFileInput = $("#fileInput"); //选择文件按钮
var oFileSpan = $("#fileSpan"); //选择文件框
var oFileList_parent = $(".fileList_parent"); //表格
var fileListName = $('.fileListName') //上传的数据列表
var oFileList = $(".fileList"); //表格tbody
var sizeObj = []; //存放每个文件大小的数组，用来比较去重
//拖拽外部文件，进入目标元素触发
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:200px">可以方鼠标了</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(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">登记申请书（2份）</div>' +
'<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(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">登记申请书（2份）</div>' +
'<div class="fileListName"></div>'
)
analysisList(fs); //解析列表函数
return false;
});
// 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;
// });
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
if(flieList.length>=2) {
layer.msg('已经完成上传最大限度', { icon: 5 });
return false
}else {
analysisList(this.files, oFileInput);
}
})
//解析列表函数
function analysisList(obj) {
function analysisList(obj, inputName) {
//如果没有文件
if (obj.length < 1) {
return false;
......@@ -69,47 +69,42 @@ $(function () {
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
var itemArr = [fileObj, name, size]; //文件，文件名，文件大小，文件类型
flieList.push(itemArr);
if (flieList.length==2){
inputName.parent().find('.update').attr('src','../staticImages/Yes.png');
inputName.parent().find('.updatetext').text('')
}
//把这个文件的大小放进数组中
sizeObj.push(size);
}
createList() //生成列表
document.querySelector('#fileInput').value = null
if (flieList.length == 2) {
oFileList_parent.show(); //表格显示
}
};
//生成列表
function createList() {
oFileList.empty(); //先清空元素内容
$('.fileListName').empty()
for (var i = 0; i < flieList.length; i++) {
var fileData = flieList[i]; //flieList数组中的某一个
var name = fileData[1]; //文件名
var oTr = $("<tr></tr>");
var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
oTr.html(str);
oTr.appendTo(oFileList);
var fileData = flieList[i];
name = fileData[1]
$('.fileListName').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
'<li class="fileName">'+
'<span title="' + name + '">' + name + '</span>' +
'<img class="operation" src="../staticImages/chacha.png">'+
'</li>'
);
}
}
//删除表格行
oFileList.on("click", "a.operation", function () {
console.log(666699)
var oTr = $(this).parents("tr");
var index = oTr.index();
oTr.remove(); //删除这一行
flieList.splice(index, 1); //删除数据
sizeObj.splice(index, 1); //删除文件大小数组中的项
if (flieList.length == 0) {
oFileList_parent.hide()
$('.fileListName').empty();
$(document).on("click", ".fileListName .fileName .operation", function (e) {
var index = $(this).parent().index();
flieList.splice(index, 1)
sizeObj.splice(index, 1)
if(flieList.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) {
......
$(function () {
//元素
var oFileInput = $("#fileInput1"); //选择文件按钮
var oFileSpan = $("#fileSpan1"); //选择文件框
var oFileList_parent = $(".fileList_parent1"); //表格
var fileListName = $('.fileListName1') //上传的数据列表
var oFileList = $(".fileList1"); //表格tbody
var oFileInput1 = $("#fileInput1"); //选择文件按钮
var sizeObj1 = []; //存放每个文件大小的数组，用来比较去重
//拖拽外部文件，进入目标元素触发
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:200px">可以方鼠标了</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(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">房屋所有权证书（2份）</div>' +
'<div class="fileListName1"></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(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">房屋所有权证书（2份）</div>' +
'<div class="fileListName1"></div>'
)
analysisList(fs); //解析列表函数
return false;
});
// 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;
// });
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
oFileInput1.on("change", function () {
if(flieList1.length>=2) {
layer.msg('已经完成上传最大限度', { icon: 5 });
return false
}else {
analysisList(this.files, oFileInput1);
}
})
//解析列表函数
function analysisList(obj) {
function analysisList(obj, inputName) {
//如果没有文件
if (obj.length < 1) {
return false;
......@@ -69,46 +69,42 @@ $(function () {
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
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() //生成列表
if (flieList1.length == 2) {
oFileList_parent.show(); //表格显示
}
document.querySelector('#fileInput1').value = null
};
//生成列表
function createList() {
oFileList.empty(); //先清空元素内容
$('.fileListName1').empty()
for (var i = 0; i < flieList1.length; i++) {
var fileData = flieList1[i]; //flieList1数组中的某一个
var name = fileData[1]; //文件名
var oTr = $("<tr></tr>");
var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
oTr.html(str);
oTr.appendTo(oFileList);
var fileData = flieList1[i];
name = fileData[1]
$('.fileListName1').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
'<li class="fileName">'+
'<span title="' + name + '">' + name + '</span>' +
'<img class="operation" src="../staticImages/chacha.png">'+
'</li>'
);
}
}
//删除表格行
oFileList.on("click", "a.operation", function () {
var oTr = $(this).parents("tr");
var index = oTr.index();
oTr.remove(); //删除这一行
flieList1.splice(index, 1); //删除数据
sizeObj1.splice(index, 1); //删除文件大小数组中的项
if (flieList1.length == 0) {
oFileList_parent.hide()
$('.fileListName1').empty();
$(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) {
......
$(function () {
//元素
var oFileInput = $("#fileInput3"); //选择文件按钮
var oFileSpan = $("#fileSpan3"); //选择文件框
var oFileList_parent = $(".fileList_parent3"); //表格
var oFileList = $(".fileList3"); //表格tbody
var oFileInput3 = $("#fileInput3"); //选择文件按钮
var sizeObj3 = []; //存放每个文件大小的数组，用来比较去重
//拖拽外部文件，进入目标元素触发
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:200px">可以方鼠标了</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(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">房屋所有权证书（2份）</div>' +
'<div class="fileListName3"></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(
' <i class="layui-icon layui-icon-addition"></i>' +
'<p>点击或拖拽文件上传</p>' +
'<div class="certificate">房屋所有权证书（2份）</div>' +
'<div class="fileListName3"></div>'
)
analysisList(fs); //解析列表函数
return false;
});
// 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;
// });
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
oFileInput3.on("change", function () {
if(flieList3.length>=1) {
layer.msg('已经完成上传最大限度', { icon: 5 });
return false
}else {
analysisList(this.files, oFileInput3);
}
})
//解析列表函数
function analysisList(obj) {
function analysisList(obj, inputName) {
//如果没有文件
if (obj.length < 1) {
return false;
......@@ -68,46 +69,40 @@ $(function () {
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
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() //生成列表
if (flieList3.length == 1) {
oFileList_parent.show(); //表格显示
}
document.querySelector('#fileInput3').value = null
document.querySelector('#fileInput1').value = null
};
//生成列表
function createList() {
oFileList.empty(); //先清空元素内容
$('.fileListName3').empty()
for (var i = 0; i < flieList3.length; i++) {
var fileData = flieList3[i]; //flieList3数组中的某一个
var name = fileData[1]; //文件名
var oTr = $("<tr></tr>");
var str = '<td><p class="fileName" title="' + name + '">' + name + '</p></td>';
str += '<td class="iconClose"><a class="operation"><i class="layui-icon layui-icon-close"></i></a></td>';
oTr.html(str);
oTr.appendTo(oFileList);
var fileData = flieList3[i];
name = fileData[1]
$('.fileListName3').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
'<li class="fileName">'+
'<span title="' + name + '">' + name + '</span>' +
'<img class="operation" src="../staticImages/chacha.png">'+
'</li>'
);
}
}
//删除表格行
oFileList.on("click", "a.operation", function () {
var oTr = $(this).parents("tr");
var index = oTr.index();
oTr.remove(); //删除这一行
flieList3.splice(index, 1); //删除数据
sizeObj3.splice(index, 1); //删除文件大小数组中的项
if (flieList3.length == 0) {
oFileList_parent.hide()
$('.fileListName3').empty();
}
});
$(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) {
......
......@@ -62,8 +62,8 @@
</div>
<!-----------------买方信息------------------ -->
<div class="person_info">
<div class="title">
<h3>买方信息</h3>
<h3>买方信息</h3>
<div class="person_radio">
<input type="radio" class="radioInfo" name="1" value="1" checked>
<p>单独所有</p>
<input type="radio" class="radioInfo" name="1" value="2">
......@@ -105,7 +105,7 @@
</div><i class="layui-icon layui-icon-reduce-circle"></i>
</div>
</form>
<div class="add_form layui-bg-gray">
<div class="add_form">
<i class="layui-icon layui-icon-addition"></i>
<p>添加个人信息</p>
</div>
......@@ -115,64 +115,52 @@
<h3>资料上传</h3>
<div class="img_update">
<div class="fileBox">
<div id="fileSpan" class="vm">
<div class="fileSpan vm">
<input type="file" multiple id="fileInput" />
<div class="file_name">
<i class="layui-icon layui-icon-addition"></i>
<p>点击或拖拽文件上传</p>
<div class="fileListName"></div>
<img class="update" src="../staticImages/update.png">
<p class="updatetext">点击文件上传</p>
</div>
<div class="fileListName"></div>
</div>
<div class="certificate">登记申请书（2份）</div>
</div>
<div class="fileList_parent">
<img src="../staticImages/dui.png">
<table width="150px" class="file_list">
<tbody class="fileList">
</table>
</div>
</div>
<!-- 房屋所有权证书 -->
<div class="img_update">
<div class="fileBox">
<div id="fileSpan1" class="vm">
<div class="fileSpan vm">
<input type="file" multiple id="fileInput1" />
<div class="file_name">
<i class="layui-icon layui-icon-addition"></i>
<p>点击或拖拽文件上传</p>
<div class="fileListName1"></div>
<img class="update" src="../staticImages/update.png">
<p class="updatetext">点击文件上传</p>
</div>
<div class="fileListName1"></div>
</div>
<div class="certificate">房屋所有权证书（2份）</div>
</div>
<div class="fileList_parent1">
<img src="../staticImages/dui.png">
<table width="150px" class="file_list">
<tbody class="fileList1">
</table>
</div>
</div>
<!-- 询问笔录 -->
<div class="img_update">
<div class="fileBox">
<div id="fileSpan3" class="vm">
<div class="fileSpan vm">
<input type="file" multiple id="fileInput3" />
<div class="file_name">
<i class="layui-icon layui-icon-addition"></i>
<p>点击或拖拽文件上传</p>
<div class="fileListName3"></div>
<img class="update" src="../staticImages/update.png">
<p class="updatetext">点击文件上传</p>
</div>
<div class="fileListName3"></div>
<a class="record">下载模板</a>
</div>
<div class="certificate">询问笔录(1)份</div>
</div>
<div class="fileList_parent3">
<img src="../staticImages/dui.png">
<!-- <div class="fileList_parent3">
<img src="../staticImages/Yes.png">
<table width="150px" class="file_list">
<tbody class="fileList3">
</table>
</div>
</div> -->
</div>
</div>
<!-- 领证方式 -->
......