这只是上传工作,并没有保存在数据库当中,以后补充。
效果展示:
选择图片
上传展示
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/style.css">
<style>
form{
width:270px;
}
input{
width: 64%;
background: #eee;
}
input:focus{
background: #fff;
}
form{
padding: 0 12px 12px;
}
label{
display: block;
padding-bottom:12px;
}
.label-text{
width: 36%;
float: left;
}
#upload-tip{
border: 1px dashed #d9d9d9;
width: 135px;
height: 135px;
line-height: 135px;
cursor: pointer;
font-size: 36px;
color:#d9d9d9;
}
#img-show{
width: 135px;
height: 135px;
display: block;
margin: 0 auto;
object-fit: cover;
}
</style>
<script>
function imgfileChange() {
var upload_tip = document.getElementById("upload-tip");
var img_show = document.getElementById("img-show");
var imgfile = document.getElementById("imgfile");
var freader = new FileReader();
freader.readAsDataURL(imgfile.files[0]);
freader.onload = function (e) {
img_show.src = e.target.result;
img_show.style.display = "inline";
upload_tip.style.display = "none";
};
}
</script>
</head>
<body>
<div id="app">
<div id="wrap">
<div id="header">
<div style="float: right;padding-top: 24px">
<!--时间显示区域-->
<span id="show">
</span>
</div>
<h1>旅游信息管理系统</h1>
</div>
<div id="header-bar"></div>
<div id="content" style="height: 480px">
<img src="../img/timg.jpg" style="float: right;height: 320px">
<h2>添加景点</h2>
<form action="viewspotlist.html" method="post">
<label>
<div class="label-text">景  点:</div>
<input type="text" v-model="place.name">
</label>
<label>
<div class="label-text">印象图片:</div>
<div style="text-align: center;padding-left: 36%">
<div id="upload-tip">+</div>
<img src="" alt="" id="img-show" style="display: none">
<input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
</div>
</label>
<label>
<div class="label-text">旺季时间:</div>
<input type="text" v-model="place.hotTime">
</label>
<label>
<div class="label-text">旺季门票:</div>
<input type="text" v-model="place.hotTicket">
</label>
<label>
<div class="label-text">淡季门票:</div>
<input type="text" v-model="place.dimTicket">
</label>
<label>
<div class="label-text">景点描述:</div>
<input type="text" v-model="place.placeDes">
</label>
<label>
<div class="label-text">所属省份:</div>
<select v-model="place.provinceId">
<option :value="pro.id" v-for="pro in provinces" v-text="pro.name"></option>
</select>
</label>
<button type="button" @click="savePlaceInfo">提 交</button> 
<a :href="'./viewspotlist.html?id='+id">返回</a>
</form>
</div>
<div id="footer">
eternalreminisce@126.com
</div>
</div>
</div>
</body>
</html>