81,091
社区成员
发帖
与我相关
我的任务
分享
<%@ 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="<%=basePath%>css/validate.css">
<script type="text/javascript"
src="<%=basePath%>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/js/easy_validator.pack.js"></script>
<style type="text/css">
.img {
width: 136px;
height: 102px;
}
.imgError {
border: 3px solid red;
}
</style>
<script type="text/javascript">
//限制上传图片大小1000K
var MAXSIZE = 1000 * 1024;
//图片大小限制信息
var ERROR_IMGSIZE = "图片大小不能超过1000K";
//默认图片
var NOPHOTO = "<%=basePath%>image/bg2.jpg";
//图片是否合格
var isImg = true;
/**
* Input file onchange事件
* @params obj file对象
* @return void
**/
function checkFileChange(obj) {
//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
var img = $(".img").get(0);
var file = obj.value;
var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i;
if (exp.test(file)) {//验证格式
if($.browser.msie) {//判断是否是IE
img.src = file;
} else {
img.src = obj.files[0].getAsDataURL();
sizeCheck(img);
}
} else {
img.src = NOPHOTO;
$(".imgTable").addClass("imgError");
updateTips("图片格式不正确");
isImg = false;
}
}
/**
* sizeCheck 检查图片大小
* @params img 图片对象
* @return void
**/
function sizeCheck(img) {
//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
if ($.browser.msie) {//查看是否是IE
if(img.readyState == "complete") {
if (img.fileSize > MAXSIZE) {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}else {
isImg = true;
}
}else {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}
} else {
var file = $("input:file[name='image']")[0];
if (file.files[0].fileSize > MAXSIZE) {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}else {
isImg = true;
}
}
}
/**
* updateTips 注册错误信息显示
* @params str 显示内容
* @return void
**/
function updateTips(str) {
$("p#errorTips").text(str);
}
/**
* commit 注册提交
* @return void
**/
function commit() {
var isCommit = true;
var img = $(".img"),
file = $("input:file[name='image']"),
frm = document.frm;
isCommit = isCommit && isImg;
if(isCommit) {
frm.submit();
}
}
/**
* errorImg 图片错误显示
* @params img 图片对象
* @return void
**/
function errorImg(img) {
img.src = NOPHOTO;
}
</script>
</script>
</head>
<body>
<form id="frm" name="frm" onSubmit="return commit();"
action="${public String _elExpressionpageContext.getRequest().getContextPath()}/upload/PicUpload"
enctype="multipart/form-data" method="post">
<p />
<table cellpadding="0" cellspacing="0" class="imgTable">
<tr>
<td>
<img src="<%=basePath%>image/bg2.jpg" class="img" alt="头像预览"
onerror="Javascript:errorImg(this);"
onreadystatechange="Javascript:sizeCheck(this);" />
</td>
</tr>
</table>
<input type="file" name="image"
onchange="Javascript:checkFileChange(this);" size="12"
class="input_validation-failed" reg=".*gif|jpg|bmp|png$"
tip="允许gif,jpg,bmp,png图片" />
<span id="files">
<p />
</span>
<img onClick="javascript:commit()" style="cursor: pointer"
src="<%=basePath%>/image/pic.jpg" />
<p />
<font color="red"><p id="errorTips"></p>
</font>
<s:property value="message" />
<p />
<font color="red">特别提醒:上传相同文件名的图片会覆盖上次上传的同名文件,且图片大小不能超过1000K,请慎重!</font>
</form>
</body>
</html>