最近写的页面（图片的编辑）

<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>修改品牌</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<c:set var="basePath" value="${pageContext.request.scheme}${'://'}${pageContext.request.serverName}${':'}${pageContext.request.serverPort}${pageContext.request.contextPath}"></c:set>
<script type="text/javascript" src="http://i0.ulechina.com/j/lib/jquery.js"></script>
<script type="text/javascript" src="http://i0.ule.com/j/jend/jend.js"></script>
<script type="text/javascript" src="${basePath }/js/item/jslib/ajaxfileupload.js"></script>
<script type="text/javascript" src="${basePath }/js/jquery.uploadify.js"></script>
<script type="text/javascript">
$(function() {
if (document.getElementById("divimg").getElementsByTagName(
"img").length > 0) {
$("#uploadImg").attr("style", "display:inline-block;margin-top:10px")
} else {
$("#uploadImg").attr("style", "display:inline-block;margin-top:113px")
}
$("#uploadPic_input").click(function() {
if ($("#brandLogoImage").attr("src") == "") {
JEND.page.dialog.show({
title : '上传品牌图片',
id : 'uploadBrandDiv',
width : 600,
height : 500
});
} else {
JEND.load('util.dialog', function() {
JEND.util.dialog.alert('商标已存在');
})
}
});
$("#uploadImg").click(function() {
JEND.page.dialog.show({
title : '上传品牌图片',
id : 'uploadBrandDiv1',
width : 600,
height : 500
});
});
});
//上传单张图片
function ajaxFileUpload() {
var oFile = document.getElementById('fileToUpload');
if(!oFile.value == ""){
$.ajaxFileUpload({
url : '${basePath}/uploadImgJquery?method=brandImg',
secureuri : false,
fileElementId : 'fileToUpload',
dataType : 'json',
success : function(data) {
if (data.returnCode == "0000") {
JEND.load('util.dialog', function() {
JEND.util.dialog.alert('图片上传成功！');
});
$("#brandLogo").val(data.imgUrl);
$("#brandLogoImage").attr("src", data.imgUrl);
$("#logo")
.append(
'<img class="imgClose" id="removelogo" src="${basePath}/images/item/cancel.png" onclick="removeImage(this);" />');
JEND.page.closeDialog();
} else {
JEND.util.dialog.alert("图片上传失败 ");

$("#brandLogoImage").attr("src", "")
}
},
error : function(data, status, e) {
JEND.util.dialog.alert("上传文件失败！");
}
})
return false;
}else{
JEND.util.dialog.alert("没有选择图片");
}

return false;
}
//上传多张图片
function ajaxFileUpload1() {
var oFile = document.getElementById('fileToUpload1');
if(!oFile.value == ""){
$.ajaxFileUpload({
url : '${basePath}/uploadImgJquery?method=brandImg',
secureuri : false,
fileElementId : 'fileToUpload1',
dataType : 'json',
success : function(data) {
if (data.returnCode == "0000") {
JEND.page.alert("图片上传成功！");
$("#brandRegCer")
.append(
"<img id='brandRegCerimg'class='cerurls' src='"+data.imgUrl+"' style='display:inline-block;100px;height:100px;'/>");
$("#brandRegCer")
.append(
'<img class="imgClose" id="remove" src="${basePath}/images/item/cancel.png" onclick="removeImage(this);" />');
$("#uploadImg").attr("style","display:inline-block;margin-top:10px")
JEND.page.closeDialog();
} else {
JEND.page.alert("图片上传失败，失败原因为" + data.returnMessage);
$("#brandLogoImage").attr("src", "")
}
},
error : function(data, status, e) {
JEND.util.dialog.alert("上传文件失败！");
}
})
return false;
}else{
JEND.util.dialog.alert("没有选择图片");
}
return false;
}
function saveclick() {
var list = $(".cerurls");
var strSrc = "";
var num
for (var i = 0; i < list.length; i++) {
num = list[i];
strSrc += ("|*|" + $(num).attr("src"))
}
strSrc = strSrc.substr(3, strSrc.length)

$('#brandRegCerUrl').val(strSrc);
updateBrandForm.submit();
}

function returnclick() {
window.location.href = "${basePath }/brand/queryBrandAll.action";
}

function removeImage(obj) {
if ($(obj).attr('id') == "removelogo") {
$(obj).prev().attr('src', '');
$("#brandLogo").val("");
$(obj).remove();
} else {
$("#uploadImg").attr("style",
"display:inline-block;margin-top:10px")
$(obj).prev().remove();
$(obj).remove();
if ($("#divimg img").length > 0) {
$("#uploadImg").attr("style",
"display:inline-block;margin-top:10px")
} else {
$("#uploadImg").attr("style",
"display:inline-block;margin-top:113px")
}

}
}
</script>
</head>
<body>
<div id="base" class="">
<div id="u50" class="text">
<p>
<span style="color: #0066CC;">   <a href="#">后台管理系统</a>&gt</span>
<span style="color: #333333;"> <a href="${basePath }/brand/showBrandManage.action" class="score-0">品牌管理</a></span>
<span style="color: #333333;">></span>
<span style="color: #333333;"> 修改品牌</span>
</p>
</div>
<form action="${basePath }/brand/updateSaveBrand.action"
name="updateBrandForm" id="updateBrandForm" method="post">
<input type="hidden" name="brandId" id="brandId"
value="${brandDto.brandId}" /> <input type="hidden"
name="brandRegCerUrl" id="brandRegCerUrl" value="" /> <input
id="brandLogo" name="brandLogo" type="hidden"
value="${brandDto.brandLogo}" />
<table id="u0" border="1px" bordercolor="">
<tr>
<td width="16%">
<div id="u2">
<p>
<span
style="font-family: 'Arial Negreta', 'Arial'; font-weight: 700; color: #FF0000;"> </span><span
style="font-family: 'Arial Negreta', 'Arial'; font-weight: 700; color: #FF0000;">*</span><span
style="font-family: 'Arial Normal', 'Arial'; font-weight: 400; color: #333333;">品牌名：</span>
</p>
</div>
</td>
<td>
<div>
<input id="brandName" name="brandName" type="text"
disabled="true" value="${brandDto.brandName}" />
</div>
</td>
</tr>
<tr>
<td>
<div id="u6" class="text">
<p>
<span
style="font-family: 'Arial Normal', 'Arial'; font-weight: 400; color: #333333;">  品牌英文名：</span>
</p>
</div>
</td>
<td>
<div id="u26" class="ax_text_field">
<input id="brandNameEn" name="brandNameEn" type="text"
value="${brandDto.brandNameEn}" onkeyup="value=value.replace(/[^w./]/ig,'')"/>
</div>
</td>
</tr>
<tr>
<td>
<div id="u2" class="text">
<p>
<span
style="font-family: 'Arial Negreta', 'Arial'; font-weight: 700; color: #FF0000;"> </span><span
style="font-family: 'Arial Negreta', 'Arial'; font-weight: 700; color: #FF0000;">*</span><span
style="font-family: 'Arial Normal', 'Arial'; font-weight: 400; color: #333333;">品牌拼音：</span>
</p>
</div>
</td>
<td>
<div>
<input id="brandNamePinyin" name="brandNamePinyin" type="text"
value="${brandDto.brandNamePinyin}" onkeyup="value=value.replace(/[^w./]/ig,'')"/>
</div>
</td>
</tr>
<tr style="height: 100px;">
<td>
<div id="u10" class="text">
<p>
<span></span><span> 品牌Logo：</span>
</p>
</div>
</td>
<td valign="bottom" align="left">

<div class="logo" id="logo" align="left" style="display: inline">
<img id="brandLogoImage" src="${brandDto.brandLogo}"
style=" 100px; height: 100px;" />
<c:if test="${not empty brandDto.brandLogo}">
<img class="imgClose"
id="removelogo"
src="${basePath}/images/item/cancel.png"
onclick="removeImage(this);" />
</c:if>
</div>
<div style="display: inline">
<span> <input id="uploadPic_input" type="button"
value="选择图片" /> <span style="color: #333333;">上传的品牌Logo需与商标注册图文信息一致</span><span
style="color: #333333;">，</span><span style="color: #333333;">格式</span><span
style="color: #FF0000;">JPG</span><span style="color: #333333;">，</span><span
style="color: #333333;">图像大小不超过</span><span
style="color: #FF0000;">100K</span><span style="color: #333333;">。</span></span>
</div>
</td>
</tr>

<tr style="height: 150px;">
<td class="w120 fw7 tar pr10"> 商标注册证明：</td>
<td class="tal pl10">
<div id="divimg" >
<c:forEach var="url" items="${brandRegCerUrls}">
<div id="brandRegCer" class="logo" align="left"
style="display: inline">
<img id='brandRegCerimg' class="cerurls" src=${ url}
style='display: inline-block; 100px; height: 100px; display: inline' />
<img class="imgClose" id="remove"
src="${basePath}/images/item/cancel.png"
style="display: inline" onclick="removeImage(this);" />
</div>
</c:forEach>
<div id="brandRegCer" class="logo" align="left" ></div>
</div> <input type="button" value="选择图片" name="uploadImg" id="uploadImg"
margin-top="113px"
style="display: inline-block; margin-top: 113px" /> <span
style="color: brown; padding: 10px 0 10px 0; font-weight: normal; font-size: 12px">正向放置、清晰、加盖红色公章,
文件格式要求为JPG、GIF、PNG、BMP中的一种，大小请限制在1M以内。</span>
</td>
</tr>

<tr>
<td>
<div>
<p>
<span> </span><span>排序：</span>
</p>
</div>
</td>
<td><input id="displaySeq" name="displaySeq" type="text"
value="${brandDto.displaySeq}"
onkeyup="this.value=this.value.replace(/D/g,'')"
onafterpaste="this.value=this.value.replace(/D/g,'')" /></td>
</tr>
<tr>
<td>
<div>
<p>
<span> </span><span>显示：</span>
</p>
</div>
</td>
<td>
<label><input type="radio" name="displayFlag" value="1"
<c:if test="${brandDto.displayFlag==1}">checked</c:if> />是</label>
<label><input type="radio" name="displayFlag" value="0"
<c:if test="${brandDto.displayFlag!=1}">checked</c:if> />不显示</label>
</td>
</tr>
<tr>
<td><span> 品牌来源：</span></td>
<td><span name="comeForm">${brandDto.comeForm}</span></td>
</tr>
<tr>
<td><span> 申请用户ID：</span></td>
<td><span>${brandDto.createUserId}</span></td>
</tr>
<tr>
<td><span> 申请用户帐号：</span></td>
<td><span>${brandDto.createUserName}</span></td>
</tr>
<tr>
<td><span> 创建时间：</span></td>
<td><span>${brandDto.createTime}</span></td>
</tr>
<tr>
<td><span> 上次修改信息：</span></td>
<td><span>用户Id：<span style="color: #169BD5;">${brandDto.updateTime}</span>|用户帐号：<span
style="color: #169BD5;">${brandDto.updateUserName}</span>|时间：<span
style="color: #169BD5;">${time} </span></span></td>
</tr>
<tr>

<td colspan="2">

<input class="button2" style="margin-left: 116px;height: 26px; 77px;" type="button" value="保存" onClick="saveclick()"/>
<input class="button2" style="margin-left: 71px;height: 26px; 77px;" type="button" value="返回" onClick="returnclick()"/>
</td>
</tr>
</table>
</form>
</div>
<div id="uploadBrandDiv" style="display: none; margin: 10px 20px;">
<form name="uploadForm" id="uploadForm" action="" method="post"
enctype="multipart/form-data">
<br>
<p style="margin: 5px;">
<input id="fileToUpload" type="file" name="fileToUpload"
class="input">
</p>
<p style="margin: 5px;font-size:18px;">上传的品牌Logo需与商标注册图文信息一致</p><br>
<p style="margin: 5px;font-size:18px;">尺寸400×200像素，格式jpg</p><br>
<p style="margin: 5px;font-size:18px;">图像大小不超过100K</p><br>
<p style="margin: 5px;font-size:18px;">
<button class="btn Borange fw7" id="buttonUpload" style="height: 40px; 124px;font-size:18px;color: #fff;background-color: #ff7f00;"
onclick="return ajaxFileUpload();">上传文件</button>
</p>
<p> </p>
</form>
</div>
<div id="uploadBrandDiv1" style="display: none; margin: 10px 20px;">
<form name="uploadForm1" id="uploadForm1" action="" method="post"
enctype="multipart/form-data">
<br>
<p style="margin: 5px;">
<input id="fileToUpload1" type="file" name="fileToUpload1"
class="input1">
</p>
<p style="margin: 5px;font-size:18px;">上传的品牌Logo需与商标注册图文信息一致</p><br>
<p style="margin: 5px;font-size:18px;">尺寸400×200像素，格式jpg</p><br>
<p style="margin: 5px;font-size:18px;">图像大小不超过100K</p><br>
<p style="margin: 5px;font-size:18px;">
<button class="btn Borange fw7" id="buttonUpload1" style="height: 40px; 124px;font-size:18px;color: #fff;background-color: #ff7f00;"
onclick="return ajaxFileUpload1();">上传文件</button>
</p>
<p> </p>
</form>
</div>
</body>
<style>
body {
margin: 0px;
background-image: none;
position: static;
left: auto;
970px;
margin-left: 0;
margin-right: 0;
text-align: left;
}

#base {
position: absolute;
z-index: 0;
}

#u0 {
position: absolute;
left: 18px;
top: 40px;
957px;
height: 455px;
}

#u4 {
position: absolute;
left: 2px;
top: 8px;
830px;
visibility: hidden;
word-wrap: break-word;
}

#u50 {
position: static;
left: 100px;
top: 0px;
350px;
word-wrap: break-word;
font-size: 12px;
}

#u0 {
border-collapse: collapse;
}

td {
border: 1px solid #D9D9F3;
padding: 5px 15px;
font-size: 12px;
}

#bimg {
background: url("F:picsave.png");
125px;
height: 30px;
border: none;
font-weight: bold;
color: white;
}

.button2 {
color: #fff;
border: 1px solid #f60;
background-color: #ffb44d;
background-image: -webkit-linear-gradient(top,#f90,#f40);
}
</style>