Skip to content

白杨 / shrae-app

Go to a project
Commit 7978a5f0 by kuayue
Options

图片上传删除

1 parent 06a56ccc
Inline Side-by-side
Showing with 184 additions and 4 deletions
dataPage.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>网点数据</title>
<script src=""></script>
<link rel="stylesheet" href="dist/layui/css/layui.css">
<script src="dist/layui/layui.js"></script>
<style>
#title{
text-align: center;
line-height:60px;
height: 50px;
font-size: large;
font-family: "微软雅黑";
}
#backimage{
display: inline;
float: left;
margin-top: 20px;
height: 20px;
margin-left: 15px;
}
.container{
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
margin-top: 5px;
font-family: "微软雅黑";
}
.container .item{
display:inline-block;
box-sizing: border-box;
width:33%;
}
#icon1{
margin-left: 15px;
height: 20px;
}
.content{
float: left;
display: inline;
font-family: "微软雅黑";
}
img{
border-radius:5px
}
#icon2{
margin-left: 15px;
height: 20px;
}
.key{
border: none;
float: left;
margin-top: -5px;
margin-left: 20px;
padding-top: 20px;
}
.value{
border: none;
float: right;
margin-top: -5px;
width: 100px;
font-family: "微软雅黑";
}
#submit{
background: #27B1A4;
color: #FFFFFF;
width: 200px;
height: 40px;
}
</style>
</head>
<body>
<!--最上方-->
<div><div id="title"><img src="src/img/btn_back.png" id="backimage"/>网点数据</div></div>
<!--灰色分割线-->
<hr class="layui-bg-gray">
<!--图片展示区-->
<div style="height: 20px;">
<div style="float: left;">
<img id="icon1" class="content" src="src/img/icon1.png"/>&nbsp;&nbsp;图片
</div>
<div class="content" style="float: right;margin-right: 10px;">4张&nbsp;&nbsp;<img src="src/img/btn1.png" onclick="editPic()"></div>
</div>
<div class="container">
<div id="picdiv">
<img src="src/img/macsierra-012.jpg" class="item" style="margin-left: 12px;"/>&nbsp;
<img src="src/img/jinmao.jpg" class="item"/>&nbsp;
<img src="src/img/184.jpg" class="item">&nbsp;
<img src="src/img/41.jpg" class="item"/>
</div>
</div>
<!--灰色分割线-->
<hr class="layui-progress">
<!--下方表格-->
<div><img id="icon2" src="src/img/icon2.png">&nbsp;&nbsp;字段</div>
<!--表格-->
<form action="" method="post" target="_blank">
<input type="text" name="key01" class="key" value="名称"/><br>
<input type="text" name="value01" class="value"value="请输入..."/><br>
<!--灰色分割线-->
<hr class="layui-bg-gray">
<input type="text" name="key02" class="key" value="名称"/><br>
<input type="text" name="value02" class="value"value="请输入..."/><br>
<hr class="layui-bg-gray">
<input type="text" name="key03" class="key" value="名称"/><br>
<input type="text" name="value03" class="value"value="请输入..."/><br>
<hr class="layui-bg-gray">
<input type="text" name="key04" class="key" value="名称"/><br>
<input type="text" name="value04" class="value"value="请输入..."/><br>
<hr class="layui-bg-gray"><br>
<p style=" margin:5px; text-align:center;"><input type="submit" value="保 存" id="submit"/></p>
</form>
</body>
<script>
function editPic(){
alert(123);
}
</script>
</html>
dist/bootstrap/css/index.css
...@@ -138,4 +138,33 @@ input:hover { ...@@ -138,4 +138,33 @@ input:hover {
} }
.check-p .del-com{ .check-p .del-com{
border-right: 1px solid #D1D1D1; border-right: 1px solid #D1D1D1;
}
#title{
text-align: center;
line-height:60px;
height: 50px;
font-size: x-large;
margin-left: 0px;
}
#saveimage{
display: inline;
float: right;
margin-top: 20px;
margin-right: 0px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 6px;
background: #27B1A4;
color: #FFFFFF;
}
#backimage{
display: inline;
float: left;
margin-top: 20px;
height: 20px;
margin-left: 15px;
} }
\ No newline at end of file
dist/bootstrap/js/imgUp.js
...@@ -16,7 +16,7 @@ $(function(){ ...@@ -16,7 +16,7 @@ $(function(){
var numUp = imgContainer.find(".up-section").length; var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量 var totalNum = numUp + fileList.length; //总的数量
if(fileList.length > 5 || totalNum > 5 ){ if(fileList.length > 5 || totalNum > 5 ){
alert("上传图片数目不可以超迿5个，请重新选择"); //一次选择上传超过5丿 或者是已经上传和这次上传的到的总数也不可以超过5丿 alert("上传图片数目不可以超迿5个，请重新选择"); //一次选择上传超过5张 或者是已经上传和这次上传的到的总数也不可以超过5张
} }
else if(numUp < 5){ else if(numUp < 5){
fileList = validateUp(fileList); fileList = validateUp(fileList);
...@@ -107,4 +107,18 @@ $(function(){ ...@@ -107,4 +107,18 @@ $(function(){
}) })
\ No newline at end of file
/**
* 返回上一页
*/
function backReturn(){
window.location.href="uploadimg.html";
}
/**
* 保存图片
*/
function saveReturn(){
alert("保存成功");
}
\ No newline at end of file
uploadImage.html
...@@ -6,16 +6,24 @@ ...@@ -6,16 +6,24 @@
<link href="dist/bootstrap/css/common.css" type="text/css" rel="stylesheet"/> <link href="dist/bootstrap/css/common.css" type="text/css" rel="stylesheet"/>
<link href="dist/bootstrap/css/index.css" type="text/css" rel="stylesheet"/> <link href="dist/bootstrap/css/index.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript"> <script type="text/javascript">
///*屏蔽鼠标右键的默认事件*/
function stops(){ function stops(){
return false; return false;
} }
document.oncontextmenu=stops; document.oncontextmenu=stops;
</script> </script>
</head> </head>
<body> <body>
<div class="img-box full"> <div class="img-box full">
<section class=" img-section"> <section class=" img-section">
<p class="up-p">图片</p> <div>
<div id="title">
<img src="src/image/btn_back.png" id="backimage" onclick="backReturn()"/>图片
<button id="saveimage" onclick="saveReturn()">保存</button>
</div>
</div>
<div class="z_photo upimg-div clear" > <div class="z_photo upimg-div clear" >
<section class="z_file fl"> <section class="z_file fl">
<img src="src/image/a11.png" class="add-img"> <img src="src/image/a11.png" class="add-img">
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!