|
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
|
|
<%@ taglib prefix="s" uri="/struts-tags" %>
|
|
|
|
|
|
<%
|
|
|
String path = request.getContextPath();
|
|
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
|
|
%>
|
|
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
|
<html>
|
|
|
<head>
|
|
|
<base href="<%=basePath%>">
|
|
|
|
|
|
<title>发布寻物</title>
|
|
|
|
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
|
<meta http-equiv="expires" content="0">
|
|
|
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
|
|
|
<meta http-equiv="description" content="This is my page">
|
|
|
<!--
|
|
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
|
|
-->
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
|
|
|
|
|
<style>
|
|
|
body{
|
|
|
width:1520px;
|
|
|
}
|
|
|
.bg{
|
|
|
position:absolute;
|
|
|
width:1520px;
|
|
|
z-index: -10;
|
|
|
left:-300px;
|
|
|
top:-340px;
|
|
|
}
|
|
|
.nav{
|
|
|
position:relative;
|
|
|
width:900px;
|
|
|
margin: 0 auto;
|
|
|
height:100px;
|
|
|
text-align: center;
|
|
|
background: #3CB371;
|
|
|
}
|
|
|
.bord{
|
|
|
top:300px;
|
|
|
position:relative;
|
|
|
width:900px;
|
|
|
margin: 0 auto;
|
|
|
background: white;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
.nav a{
|
|
|
position: relative;
|
|
|
margin-top: 10px;
|
|
|
color: black;
|
|
|
top:30px;
|
|
|
font-size: 30px;
|
|
|
color: white;
|
|
|
}
|
|
|
select{
|
|
|
height:40px;
|
|
|
width:400px;
|
|
|
border: 1px solid #D4D4D4;
|
|
|
}
|
|
|
.form-control{
|
|
|
height:40px;
|
|
|
width:263px;
|
|
|
border: 1px solid #D4D4D4;
|
|
|
}
|
|
|
|
|
|
.container{
|
|
|
position:relative;
|
|
|
border: 1px solid #DCDCDC;
|
|
|
padding-left: 50px;
|
|
|
padding-top: 30px;
|
|
|
padding-bottom:100px;
|
|
|
top:80px;
|
|
|
left:10px;
|
|
|
background: white;
|
|
|
}
|
|
|
input {
|
|
|
outline-color: #FFB90F;
|
|
|
height:40px;
|
|
|
border-radius:5px;
|
|
|
border: 1px solid #D4D4D4;
|
|
|
text-indent: 20px;
|
|
|
}
|
|
|
input::-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
|
|
|
color: rgb(180 ,180, 180);;
|
|
|
}
|
|
|
input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
|
|
|
color: rgb(180 ,180, 180);
|
|
|
}
|
|
|
textarea::-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
|
|
|
color: rgb(180 ,180, 180);;
|
|
|
}
|
|
|
textarea::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
|
|
|
color: rgb(180 ,180, 180);
|
|
|
}
|
|
|
.row{
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.lbl{
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
input{
|
|
|
width:800px;
|
|
|
}
|
|
|
.submit{
|
|
|
margin-top: 40px;
|
|
|
}
|
|
|
.in{
|
|
|
width:800px;
|
|
|
outline-color: #FFB90F;
|
|
|
}
|
|
|
.submit{
|
|
|
background: #00CD64;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="bord">
|
|
|
<img class="bg" alt="" src="./img/fbxw.png">
|
|
|
<div class="container">
|
|
|
<s:form class="contact" action="Fbxw" method="post" id="form_example" enctype="multipart/form-data" >
|
|
|
|
|
|
<div class="row clearfix">
|
|
|
<div class="lbl">
|
|
|
<label for="name">
|
|
|
标题</label>
|
|
|
</div>
|
|
|
<div class="ctrl">
|
|
|
<input type="text" id="name" name="xw.title" data-required="true" data-validation="text" data-msg="Invalid Name" placeholder="丢了什么呢">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="row clearfix">
|
|
|
<div class="lbl">
|
|
|
<label for="message">
|
|
|
描述</label>
|
|
|
</div>
|
|
|
<div class="ctrl">
|
|
|
<textarea class="in" id="message" name="xw.miao" rows="6" cols="10" placeholder="描述越详细找到的可能性越大哦~"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row clearfix">
|
|
|
<div class="lbl">
|
|
|
<label for="email">
|
|
|
丢失地点</label>
|
|
|
</div>
|
|
|
<div class="ctrl">
|
|
|
<input type="text" id="email" name="xw.address" data-required="true" data-validation="email" data-msg="Invalid E-Mail" placeholder="在哪里丢的啊~">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row clearfix">
|
|
|
<div class="lbl">
|
|
|
<label for="email">
|
|
|
丢失时间</label>
|
|
|
</div>
|
|
|
<div class="ctrl">
|
|
|
<input type="text" id="email" name="xw.time" data-required="true" data-validation="email" data-msg="Invalid E-Mail" placeholder="在哪里丢的啊~">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row clearfix">
|
|
|
<div class="lbl">
|
|
|
<label for="微信号">
|
|
|
微信号</label>
|
|
|
</div>
|
|
|
<div class="ctrl">
|
|
|
<input type="text" calss="in" id="phone" name="xw.wx" data-required="true" data-validation="custom" data-msg="Invalid Phone #" placeholder="微信号，手机号，QQ号要至少填一项的！">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row clearfix">
|
|
|
<div class="lbl">
|
|
|
<label for="微信号">
|
|
|
手机号</label>
|
|
|
</div>
|
|
|
<div class="ctrl">
|
|
|
<input type="text"class="in" id="phone" name="xw.tel" data-required="true" data-validation="custom" data-msg="Invalid Phone #" placeholder="微信号，手机号，QQ号要至少填一项的！ ">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="row clearfix">
|
|
|
<div class="lbl">
|
|
|
<label for="email">
|
|
|
QQ</label>
|
|
|
</div>
|
|
|
<div class="ctrl">
|
|
|
<input type="text" id="email" name="xw.qq" data-required="true" data-validation="email" data-msg="Invalid E-Mail" placeholder="微信号，手机号，QQ号要至少填一项的！">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--
|
|
|
<div class="row clearfix"><div class="lbl">
|
|
|
<label>上传图片：</label></div>
|
|
|
<div class="ctrl">
|
|
|
<div style="display: none" id="myss"> <img id="img" src="">
|
|
|
<div style="height: 20px"></div>
|
|
|
</div>
|
|
|
<input id="files" type="file" onchange="compress()" multiple name="file" style="height:25px;border:none" >
|
|
|
<input type="hidden" value="" name="image" id="image">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$(document).ready(function () {
|
|
|
var fileList = [];
|
|
|
var fileCatcher = document.getElementById('form_example');
|
|
|
var files = document.getElementById("files"), renderFileList;
|
|
|
var fileListDisplay = document.getElementById('file-list-display'), sendFile;
|
|
|
|
|
|
fileCatcher.addEventListener("submit", function (event) {
|
|
|
event.preventDefault();
|
|
|
//上传文件
|
|
|
sendFile();
|
|
|
|
|
|
console.log(1);
|
|
|
});
|
|
|
|
|
|
files.addEventListener("change", function (event) {
|
|
|
for (var i = 0; i < files.files.length; i++) {
|
|
|
console.log("file"+i);
|
|
|
|
|
|
fileList.push(files.files[i]);
|
|
|
|
|
|
}
|
|
|
console.log(2);
|
|
|
renderFileList();
|
|
|
console.log(3);
|
|
|
});
|
|
|
|
|
|
renderFileList = function () {
|
|
|
fileListDisplay.innerHTML = '';
|
|
|
fileList.forEach(function (file, index) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{}
|
|
|
let fileObj = file ;//上传文件的对象
|
|
|
let reader = new FileReader();
|
|
|
reader.readAsDataURL(fileObj);
|
|
|
reader.onload = function(e) {
|
|
|
let image = new Image() ;//新建一个img标签（还没嵌入DOM节点)
|
|
|
image.src = e.target.result;
|
|
|
image.onload = function() {
|
|
|
let canvas = document.createElement('canvas'),
|
|
|
context = canvas.getContext('2d'),
|
|
|
may=300/image.width,
|
|
|
imageWidth =300, //压缩后图片的大小
|
|
|
imageHeight = image.height*may,
|
|
|
data = '';
|
|
|
|
|
|
canvas.width = imageWidth;
|
|
|
canvas.height = imageHeight;
|
|
|
|
|
|
context.drawImage(image, 0, 0, imageWidth, imageHeight);
|
|
|
data = canvas.toDataURL('image/jpeg');
|
|
|
|
|
|
console.log("data");
|
|
|
|
|
|
var imgg = document.createElement("img");
|
|
|
imgg.src =data ;
|
|
|
fileListDisplay.appendChild(imgg);
|
|
|
|
|
|
|
|
|
}};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(4);
|
|
|
var fileDisplayEl = document.createElement("p");
|
|
|
fileDisplayEl.innerHTML = (index + 1) + ":" + file.name;
|
|
|
fileListDisplay.appendChild(fileDisplayEl);
|
|
|
})
|
|
|
};
|
|
|
|
|
|
sendFile = function () {
|
|
|
console.log(5);
|
|
|
var formData = new FormData();
|
|
|
var request = new XMLHttpRequest();
|
|
|
//循环添加到formData中
|
|
|
fileList.forEach(function (file) {
|
|
|
console.log(6);
|
|
|
|
|
|
formData.append('files', file, file.name);
|
|
|
})
|
|
|
request.open("POST", "/test/upload.do");
|
|
|
request.send(formData);
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
<script>
|
|
|
|
|
|
// 对图片进行压缩
|
|
|
function compress() {
|
|
|
|
|
|
|
|
|
let fileObj = document.getElementById('file').files[0] ;//上传文件的对象
|
|
|
let reader = new FileReader();
|
|
|
reader.readAsDataURL(fileObj);
|
|
|
reader.onload = function(e) {
|
|
|
let image = new Image() ;//新建一个img标签（还没嵌入DOM节点)
|
|
|
image.src = e.target.result;
|
|
|
image.onload = function() {
|
|
|
let canvas = document.createElement('canvas'),
|
|
|
context = canvas.getContext('2d'),
|
|
|
may=300/image.width,
|
|
|
imageWidth =300, //压缩后图片的大小
|
|
|
imageHeight = image.height*may,
|
|
|
data = '';
|
|
|
|
|
|
canvas.width = imageWidth;
|
|
|
canvas.height = imageHeight;
|
|
|
|
|
|
context.drawImage(image, 0, 0, imageWidth, imageHeight);
|
|
|
data = canvas.toDataURL('image/jpeg');
|
|
|
|
|
|
console.log(data);
|
|
|
//压缩完成
|
|
|
document.getElementById('img').src = data;
|
|
|
//document.getElementById('image').value =data;
|
|
|
|
|
|
var div = document.getElementById("myss");
|
|
|
div.style.setProperty('display','block');
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
-->
|
|
|
|
|
|
<input type="hidden" value="1577948535" name="senddate">
|
|
|
<input type="hidden" value="1577948535" name="sortrank">
|
|
|
<input type="hidden" value="1577948535" name="arcrank">
|
|
|
<input type="hidden" value="1" name="typeid">
|
|
|
<input type="hidden" value="20" name="channelid">
|
|
|
<input type="hidden" value="1" name="type">
|
|
|
<div class="row clearfix">
|
|
|
<div class="span10 offset2">
|
|
|
<input type="submit" name="submit" class="submit" value="确认发布">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="clear: both"></div>
|
|
|
</s:form>
|
|
|
<div id='file-list-display'></div>
|
|
|
|
|
|
<div style="clear: both"></div>
|
|
|
</div></div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
