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 444 additions and 191 deletions
......@@ -55,9 +55,9 @@
display: none;
}
.img_update {
border: 1px solid #eeeeee;
overflow: hidden;
position: relative;
float: left;
}
.fileBox{
......@@ -83,7 +83,7 @@
font-size: 14px;
line-height: 24px;
}
#fileSpan{
#fileSpan , #fileSpan1, #fileSpan3{
display: inline-block;
width: 285px;
height: 200px;
......@@ -91,7 +91,10 @@
text-align: center;
position: relative;
}
#fileInput {
#fileSpan:hover , #fileSpan1:hover, #fileSpan3:hover{
border-color:#0091FF;
}
#fileInput, #fileInput1, #fileInput3{
position: absolute;
width: 100%;
height: 100%;
......@@ -101,7 +104,7 @@
cursor: pointer;
z-index: 10;
}
.fileList_parent{
.fileList_parent, .fileList_parent1, .fileList_parent3{
position: absolute;
left: 12px;
top: 12px;
......@@ -125,11 +128,11 @@
text-align: center;
margin: 0 auto;
}
.fileList_parent img {
.fileList_parent img , .fileList_parent1 img, .fileList_parent3 img{
width: 50px;
height: 60px;
}
.fileList_parent {
.fileList_parent, .fileList_parent1, .fileList_parent3 {
float: left;
}
.file_name {
......@@ -142,19 +145,19 @@
color: #0091FF;
cursor: pointer;
}
.fileListName {
.fileListName, .fileListName1, .fileListName3{
text-align: center;
padding-top: 10px;
}
.fileListName p {
.fileListName p , .fileListName1 p, .fileListName3 p{
display: inline-block;
height: 17px;
}
.fileListName a {
.fileListName a , .fileListName1 a, .fileListName3 a {
display: inline-block;
line-height: 14px;
}
.fileListName a i {
.fileListName a i, .fileListName1 a i, .fileListName3 a i{
line-height: 14px;
height: 14px;
padding: 0;
......@@ -163,11 +166,11 @@
font-size: 14px;
font-weight: 600;
}
.fileList tr {
.fileList tr, .fileList1 tr, .fileList3 tr {
line-height: 28px;
width: 70px;
}
.fileList tr td {
.fileList tr td, .fileList1 tr td, .fileList3 tr td {
width: 70px;
}
.operation a:hover {
......@@ -175,10 +178,7 @@
}
.next_button {
text-align: center;
margin: 15px 0;
}
.next_button a {
color: #ffffff;
margin: 30px 0 100px 0;
}
.name_title {
padding: 10px;
......@@ -285,4 +285,22 @@
/* -----------------资料上传---------------------- */
.data_upload {
margin-top: 20px;
overflow: hidden;
}
/* -----------------询问笔录---------------------- */
.record {
position: absolute;
left: 0;
bottom: 30px;
display: block;
line-height: 20px;
height: 20px;
color: #0091FF;
text-align: center;
z-index: 30;
width: 100%;
cursor: pointer;
}
.record:hover {
color: #0091FF;
}
\ 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;
});
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
})
//解析列表函数
function analysisList(obj) {
//如果没有文件
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 (sizeObj.indexOf(size) != -1) {
layer.msg('已经选择，不能重复上传', { icon: 5 });
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
flieList.push(itemArr);
//把这个文件的大小放进数组中
sizeObj.push(size);
}
createList() //生成列表
document.querySelector('#fileInput').value = null
if (flieList.length == 2) {
oFileList_parent.show(); //表格显示
}
};
//生成列表
function createList() {
oFileList.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);
$('.fileListName').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
);
}
}
//删除表格行
oFileList.on("click", "a.operation", function () {
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();
}
});
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
$(function () {
//元素
var oFileInput = $("#fileInput1"); //选择文件按钮
var oFileSpan = $("#fileSpan1"); //选择文件框
var oFileList_parent = $(".fileList_parent1"); //表格
var fileListName = $('.fileListName1') //上传的数据列表
var oFileList = $(".fileList1"); //表格tbody
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;
});
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
})
//解析列表函数
function analysisList(obj) {
//如果没有文件
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 (sizeObj1.indexOf(size) != -1) {
layer.msg('已经选择，不能重复上传', { icon: 5 });
return false;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
flieList1.push(itemArr);
//把这个文件的大小放进数组中
sizeObj1.push(size);
}
createList() //生成列表
if (flieList1.length == 2) {
oFileList_parent.show(); //表格显示
}
document.querySelector('#fileInput1').value = null
};
//生成列表
function createList() {
oFileList.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);
$('.fileListName1').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
);
}
}
//删除表格行
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();
}
});
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
$(function () {
//元素
var oFileInput = $("#fileInput3"); //选择文件按钮
var oFileSpan = $("#fileSpan3"); //选择文件框
var oFileList_parent = $(".fileList_parent3"); //表格
var oFileList = $(".fileList3"); //表格tbody
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;
});
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
})
//解析列表函数
function analysisList(obj) {
//如果没有文件
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, type]; //文件，文件名，文件大小，文件类型
flieList3.push(itemArr);
//把这个文件的大小放进数组中
sizeObj3.push(size);
}
createList() //生成列表
if (flieList3.length == 1) {
oFileList_parent.show(); //表格显示
}
document.querySelector('#fileInput3').value = null
};
//生成列表
function createList() {
oFileList.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);
$('.fileListName3').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
);
}
}
//删除表格行
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();
}
});
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
$(function () {
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
});
......@@ -130,178 +129,16 @@ $(function () {
})
})
// 图片上传
//元素
var oFileBox = $(".fileBox"); //选择文件父级盒子
var oFileInput = $("#fileInput"); //选择文件按钮
var oFileSpan = $("#fileSpan"); //选择文件框
var oFileList_parent = $(".fileList_parent"); //表格
var oFileList = $(".fileList"); //表格tbody
var oFileBtn = $("#fileBtn"); //上传按钮
var flieList = []; //数据，为一个复合数组
var sizeObj = []; //存放每个文件大小的数组，用来比较去重
//拖拽外部文件，进入目标元素触发
oFileSpan.on("dragenter", function () {
$(this).find('.file_name').css("background", "#ccc");
$('.file_name').empty();
$(this).find('.file_name').append(
'<p style="line-height:200px">可以方鼠标了</p>'
)
});
//拖拽外部文件，进入目标、离开目标之间，连续触发
oFileSpan.on("dragover", function () {
return false;
});
//拖拽外部文件，离开目标元素触发
oFileSpan.on("dragleave", function () {
$('.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;
$('.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;
});
//点击选择文件按钮选文件
oFileInput.on("change", function () {
analysisList(this.files);
// 询问笔录
$('.record').click(function(event){
event.stopPropagation();
console.log('下载模板99')
})
var flieList = []; // 登记证书列表
var flieList1 = []; // 房屋所有权证书列表
var flieList3 = []; // 询问笔录
$('.next_button a').click(function(){
console.log(999, flieList,5689, flieList1,98999, flieList3)
return false
})
//解析列表函数
function analysisList(obj) {
//如果没有文件
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 });
continue;
}
//把文件大小放到一个数组中，然后再去比较，如果有比较上的，就认为重复了，不能上传
if (sizeObj.indexOf(size) != -1) {
layer.msg('已经选择，不能重复上传', { icon: 5 });
continue;
}
//给json对象添加内容，得到选择的文件的数据
var itemArr = [fileObj, name, size, type]; //文件，文件名，文件大小，文件类型
flieList.push(itemArr);
//把这个文件的大小放进数组中
sizeObj.push(size);
}
createList() //生成列表
document.querySelector('#fileInput').value = null
if (flieList.length == 2) {
oFileList_parent.show(); //表格显示
}
};
//生成列表
function createList() {
oFileList.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);
$('.fileListName').append(
'<p class="fileName" title="' + name + '">' + name + '</p>' +
'<a class="operation"><i class="layui-icon layui-icon-close"></i></a>'
);
}
}
//删除表格行
oFileList.on("click", "a.operation", function () {
var oTr = $(this).parents("tr");
var index = oTr.index();
oTr.remove(); //删除这一行
flieList.splice(index, 1); //删除数据
sizeObj.splice(index, 1); //删除文件大小数组中的项
if (flieList.length == 0) {
$('.fileList_parent').hide()
$('.fileListName').empty();
}
});
//上传
oFileBtn.on("click", function () {
oFileBtn.off();
var tr = oFileList.find("tr"); //获取所有tr列表
var successNum = 0; //已上传成功的数目
oFileList.off(); //取消删除事件
oFileBox.slideUp(); //隐藏输入框
oFileList.find("a.operation").text("等待上传");
for (var i = 0; i < tr.length; i++) {
uploadFn(tr.eq(i), i); //参数为当前项，下标
}
function uploadFn(obj, i) {
var formData = new FormData();
var arrNow = flieList[i]; //获取数据数组的当前项
// 从当前项中获取上传文件，放到 formData对象里面，formData参数以key name的方式
var result = arrNow[0]; //数据
formData.append("imageFile", result);
var name = arrNow[1]; //文件名
formData.append("email", name);
var oOperation = obj.find("a.operation"); //按钮
oOperation.text("正在上传"); //改变操作按钮
oOperation.off();
var request = $.ajax({
type: "POST",
url: "../more/cModifyImageAction.go",
data: formData, //这里上传的数据使用了formData 对象
processData: false, //必须false才会自动加上正确的Content-Type
contentType: false,
//这里我们先拿到jQuery产生的XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
xhr: function () {
var xhr = $.ajaxSettings.xhr();
if (onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", onprogress, false);
return xhr;
}
},
//上传成功后回调
success: function () {
oOperation.text("成功");
successNum++;
console.log(successNum);
if (successNum == tr.length) {
open("http://www.baidu.com", "_self"); //如果全部传成功了，跳转
}
},
//上传失败后回调
error: function () {
oOperation.text("重传");
oOperation.on("click", function () {
request.abort(); //终止本次
uploadFn(obj, i);
});
}
});
}
});
})
//通过文件名，返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
......
......@@ -131,8 +131,50 @@
</table>
</div>
</div>
</div>
<!-- 房屋所有权证书 -->
<div class="img_update">
<div class="fileBox">
<div id="fileSpan1" class="vm">
<input type="file" multiple id="fileInput1" />
<div class="file_name">
<i class="layui-icon layui-icon-addition"></i>
<p>点击或拖拽文件上传</p>
<div class="certificate">房屋所有权证书（2份）</div>
<div class="fileListName1"></div>
</div>
</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">
<input type="file" multiple id="fileInput3" />
<div class="file_name">
<i class="layui-icon layui-icon-addition"></i>
<p>点击或拖拽文件上传</p>
<div class="certificate">询问笔录(1)份</div>
<div class="fileListName3"></div>
</div>
<a class="record">下载模板</a>
</div>
</div>
<div class="fileList_parent3">
<img src="../staticImages/dui.png">
<table width="150px" class="file_list">
<tbody class="fileList3">
</table>
</div>
</div>
</div>
<!-- 领证方式 -->
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="./wshs.html">
......@@ -145,6 +187,9 @@
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/yysq.js"></script>
<script type="text/javascript" src="../staticJs/imageUpdate.js"></script>
<script type="text/javascript" src="../staticJs/imageUpdate1.js"></script>
<script type="text/javascript" src="../staticJs/imageUpdate3.js"></script>
<script type="text/html" id="barDemo">
<i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
</script>
......