java web 简单图片上传
levysnail 2015-01-04
<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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>
<title>信息公告</title>
<link href="<%=basePath %>css/base.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<link href="<%=basePath %>js/validate/jquery.validate.css" type="text/css" rel="stylesheet"/>
<script src="<%=basePath %>js/validate/jquery.validate.js" type="text/javascript"></script>
<script src="<%=basePath %>js/validate/messages_cn.js" type="text/javascript"></script>
<link href="<%=basePath %>js/ajaxfileupload/ajaxfileupload.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="<%=basePath %>js/ajaxfileupload/ajaxfileupload.js"></script>
<script>
var P = window.parent, E = P.setDialog();
var valida;
$(document).ready(function() {
valida=$("#inputForm").validate({
rules: {
"announcement.fileType": {
required:true
},
"announcement.title": {
required:true
}
},
messages: {}
});
});
function PreviewImg(imgFile){
var imgDiv = document.getElementById("photo");
imgFile.select();
var realpath = document.selection.createRange().text;
imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = realpath;
}
</script>
</head>
<body>
<form id="inputForm">
<table>
<tr>
<td style="background-color:#CDEAFA;width:30%;">发布类型:</td>
<td><select id="announcementType" name="announcement.fileType" >
<option value="" >请选择</option>
<option value="1" >物业公告</option>
<option value="2" >健康消息</option>
<option value="3" >娱乐消息</option>
<option value="4" >购物消息</option>
<option value="5" >餐饮消息</option>
<option value="6" >旅游消息</option>
</select></td>
<td rowspan="4"><div id="photo" style="width:150px;height:150px;background:url(<%=basePath %>image/nophoto.jpg);"></div></td>
</tr>
<tr>
<td style="background-color:#CDEAFA">标题:</td>
<td><input id="title" type="text" name="announcement.title" maxlength="15" size="30"/></td>
</tr>
<tr>
<td style="background-color:#CDEAFA">图片:</td>
<td><img id="loading" src="<%=basePath %>js/ajaxfileupload/loading.gif" style="display:none;" />
<input onchange="javascript:PreviewImg(this);" id="myFile" type="file" size="42" name="myFile" style="vertical-align: middle; border: 1px solid #86888B;font: 12px Arial,Helvetica,sans-serif;" />
<br/><span style="color:#32CD32">建议图片大小最大为100kb，尺寸为200*200！</span>
</td>
</tr>
<tr>
<td style="background-color:#CDEAFA">咨询电话:</td>
<td><input id="telNum" type="text" name="announcement.telNum" maxlength="15" size="30"/></td>
</tr>
<tr>
<td style="background-color:#CDEAFA">公告信息:</td>
<td colspan="2"><textarea id="announcement.desc" rows="8" cols="60" onpropertychange="if(this.scrollHeight>40) this.style.posHeight=this.scrollHeight+5"></textarea>
</td>
</tr>
</table>
<div align="right" style="margin: 1.5em;" width="10%">
<input class="btn" type="button" value="保存" onclick="save();"/>
<input class="btn" type="reset" value="重置"/>
</div>
</form>
</body>
</html>
<script type="text/javascript">
var fields;
function save(){
var announcementType = document.getElementById("announcementType").value;
var title = document.getElementById("title").value;
if(announcementType==""){
alert("请选择发布信息类型");
return false;
}
if(title==""){
alert("请输入信息标题");
return false;
}
if(title.length>100){
alert("信息标题过长");
return false;
}
if(document.getElementById('announcement.desc').value==""){
alert("请输入信息内容");
return false;
}
if(document.getElementById('announcement.desc').value.length>500){
alert("信息内容过长");
return false;
}
if(checkImg())
{
fields = $('#inputForm').serialize();
var desc =document.getElementById('announcement.desc').value.replace(/"/gm,""");
$.ajaxFileUpload({
url:'<%=basePath %>announcement/add.do?'+fields,
secureuri:false,
fileElementId:'myFile',
dataType: 'json',
data:{'announcement.desc':desc,'announcement.fileType':announcementType},
complete: function (data, status)
{
alert(data["responseText"]);
if("保存成功！"==data["responseText"]){
top.frames["aaa"].frames["main"].document.forms[0].submit();
}
}
});
}
}
function checkImg()
{
return true;//先不检查图片尺寸
var image = new Image();
image.src =document.getElementById("myFile").value;
if(GetImageWidth(image)==0||(GetImageWidth(image)==200&&GetImageHeight(image)==200))
{
return true;
}
else
{
alert("请检查图片尺寸是否为200*200!");
return false;
}
}
//js获取原始图片大小
function GetImageWidth(oImage)
{
var OriginImage=new Image();
OriginImage.src=oImage.src;
return OriginImage.width;
}
function GetImageHeight(oImage)
{
var OriginImage=new Image();
OriginImage.src=oImage.src;
return OriginImage.height;
}
</script>
