Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
dbceb7f6 by 任超
Options

feat:图片上传

1 parent b3c9544c
Inline Side-by-side
Showing 7 changed files with 471 additions and 28 deletions
......@@ -74,3 +74,6 @@
text-align: center;
margin-bottom: 20px;
}
.next_button a {
color: #fff;
}
\ No newline at end of file
......
......@@ -34,14 +34,14 @@
border-left-color: #1E9FFF;
}
.selected {
background-color: #5FB878!important;
background-color: #009688!important;
color: #fff!important;
}
.selected:hover {
background-color: #5FB878!important;
background-color: #009688!important;
}
.app_progress li.selected:after {
border-left-color: #5FB878;
border-left-color: #009688;
}
.line {
width: 62px;
......
.content_box {
width: 1200px;
margin: 0 auto;
min-height:calc(100vh - 227px);
padding: 20px 0;
}
.title {
height: 16px;
padding: 10px 0;
margin: 15px 0;
padding-left: 10px;
}
.title h2 {
font-weight: 600;
height: 16px;
line-height: 16px;
padding-left: 5px;
border-left: 3px solid #ffffff;
float: left;
}
.title i {
font-size: 24px;
position: relative;
top: -5px;
color: #ffffff;
left: 198px;
}
.layui-icon {
cursor: pointer;
}
.tabs_title i{
font-size: 24px;
position: relative;
top: -10px;
color: #0091FF;
}
.layui-tab {
width: 23%;
display: inline-block;
}
.layui-tab-bar {
display: none;
}
.img_update {
border: 1px solid #eeeeee;
overflow: hidden;
}
.fileBox{ margin:10px;width: 330px;float: left; }
#fileSpan{display:inline-block;width:300px;height:150px;border:2px dashed #ccc;text-align:center;line-height:150px;position: relative;}
#fileInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
}
.fileList_parent{margin:20px;display:none;}
.fileList_parent {
float: left;
}
.operation {
color: #0091FF;
cursor: pointer;
}
.fileList tr {
line-height: 28px;
}
\ No newline at end of file
$(function () {
var tabledata = [
{
name: 'renchao',
idcard: '61012419930879879',
phone: '18740677380'
}
];
var sellData = [
{
name: 'renchao',
idcard: '61012419930879879',
phone: '18740677380'
}
];
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
layer.msg(elem.text());
});
});
addTabs('#wssq')
// 业务
layui.use('element', function () {
var element = layui.element;
//监听Tab切换，以改变地址hash值
element.on('tab(status)', function () {
console.log(this.getAttribute('lay-id'))
});
});
// 买方信息
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#buyInfo'
// , url: '../staticLib/wdyy/index.json'
, cols: [[
{ field: 'name', title: '权利人', align: 'center', edit: 'text' }
, { field: 'idcard', title: '身份证号', align: 'center', edit: 'text' }
, { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
, { title: '操作', toolbar: '#barDemo', align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
},
data: tabledata
});
table.on('row(buyInfo)', function (obj) {
var rowIndex = $(obj.tr).attr("data-index");
layer.confirm('此操作将删除一列是否继续', {
btn: ['是', '否'] //按钮
}, function () {
tabledata.splice(rowIndex, 1);
table.reload('buyInfo', {
data: tabledata
})
layer.closeAll();
}, function () {
});
});
$('.tableAdd').click(function () {
tabledata.push({
"name": ""
, "idcard": ""
, "phone": ""
})
table.reload('buyInfo', {
data: tabledata
})
})
})
// 卖方信息
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#sellInfo'
, cols: [[
{ field: 'name', title: '义务人', align: 'center', edit: 'text' }
, { field: 'idcard', title: '证件号', align: 'center', edit: 'text' }
, { field: 'phone', title: '联系电话', align: 'center', edit: 'text' }
, { title: '操作', toolbar: '#barDemo', align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
},
data: sellData
});
//监听行工具事件
table.on('row(sellInfo)', function (obj) {
var rowIndex = $(obj.tr).attr("data-index");
layer.confirm('此操作将删除一列是否继续', {
btn: ['是', '否'] //按钮
}, function () {
sellData.splice(rowIndex, 1);
table.reload('sellInfo', {
data: sellData
})
layer.closeAll();
}, function () {
});
});
$('.tableAdd1').click(function () {
sellData.push({
"name": ""
, "idcard": ""
, "phone": ""
})
console.log(999, sellData)
table.reload('sellInfo', {
data: sellData
})
})
})
// 图片上传
//元素
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').text("可以释放鼠标了！").css("background", "#ccc");
});
//拖拽外部文件，进入目标、离开目标之间，连续触发
oFileSpan.on("dragover", function () {
return false;
});
//拖拽外部文件，离开目标元素触发
oFileSpan.on("dragleave", function () {
$(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
});
//拖拽外部文件，在目标元素上释放鼠标触发
oFileSpan.on("drop", function (ev) {
var fs = ev.originalEvent.dataTransfer.files;
analysisList(fs); //解析列表函数
$(this).find('.file_name').text("点击或拖拽文件上传").css("background", "none");
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});
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() //生成列表
oFileList_parent.show(); //表格显示
document.querySelector('#fileInput').value = null
};
//生成列表
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><cite title="' + name + '">' + name + '</cite></td>';
str += '<td><a class="operation">删除</a></td>';
oTr.html(str);
oTr.appendTo(oFileList);
}
}
//删除表格行
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); //删除文件大小数组中的项
});
//上传
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();
}
......@@ -14,30 +14,6 @@
"classify": "作家",
"score": 57,
"state": 1
},
{
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27,
"state": 1
},
{
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31,
"state": 0
}
]
}
\ No newline at end of file
......
......@@ -219,7 +219,9 @@
</li>
</ul>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">下一步</button>
<button type="button" class="layui-btn layui-btn-normal">
<a href="./yysq.html">下一步</a>
</button>
</div>
</div>
</div>
......
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>立即办理-申请</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/yysq.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progress.css">
</head>
<body>
<div class="navigation_crumbs">
<div class="contentBox">
<span class="layui-breadcrumb">
<a href="../../index.html">首页</a>
<a href="../wssq/index.html">网上申请</a>
<a><cite>在线申请</cite></a>
</span>
</div>
</div>
<div class="content_box">
<div class="name_title layui-bg-gray">
<h2></h2>
<p></p>
</div>
<ul class="app_progress">
<li class="selected">
<span>1</span>
效验
</li>
<div class="line"></div>
<li class="active">
<span>2</span>
申请
</li>
<div class="line"></div>
<li>
<span>3</span>
完税
</li>
<div class="line"></div>
<li>
<span>4</span>
认证
</li>
<div class="line"></div>
<li>
<span>5</span>
领证方式
</li>
<div class="line"></div>
<li>
<span>6</span>
缴费
</li>
<div class="line"></div>
<li>
<span>7</span>
公示
</li>
</ul>
<div class="title layui-bg-green">
<h2>买方信息/共有情况</h2>
</div>
<div class="tabs_title">
<div class="layui-tab layui-tab-brief" lay-filter="status">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">单独所有</li>
<li lay-id="2">共同共有</li>
<li lay-id="3">按份共有</li>
</ul>
<div class="layui-tab-content"></div>
</div>
<i class="layui-icon layui-icon-add-circle tableAdd"></i>
</div>
<table id="buyInfo" lay-filter="buyInfo"></table>
<div class="title layui-bg-green">
<h2>卖方信息</h2>
<i class="layui-icon layui-icon-add-circle tableAdd1"></i>
</div>
<table id="sellInfo" lay-filter="sellInfo"></table>
<div class="title layui-bg-green">
<h2>申报材料</h2>
</div>
<div class="img_update">
<div class="fileBox">
<div id="fileSpan" class="vm">
<input type="file" multiple id="fileInput" />
<p class="file_name">
点击或拖拽文件上传
</p>
</div>
</div>
<table width="36%" border="1" class="fileList_parent">
<tbody class="fileList">
</table>
</div>
</div>
</body>
<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/html" id="barDemo">
<i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
</script>
</html>
\ No newline at end of file