最近写的页面（含有图片的上传，单图片及多图片）

zoukankan html css js c++ java

最近写的页面（含有图片的上传，单图片及多图片）

<%@ 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" src="${basePath }/js/jquery.json.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#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('商标已存在');
})
}
});
}

);
//上传单图片
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.load('util.dialog', function() {
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;
}
$(document).ready(function() {
$("#uploadImg").click(function() {
JEND.page.dialog.show({
title : '上传品牌图片',
id : 'uploadBrandDiv1',
width : 600,
height : 500
});
});
});
//上传多图片
function ajaxFileUpload1() {
var oFile = document.getElementById('fileToUpload1');
if(!oFile.value == ""){
$.ajaxFileUpload({
url : '${basePath }/uploadImgJquery?method=brandImg',
// url : '${basePath }/UploadEamge',
secureuri : false,
fileElementId : 'fileToUpload1',
dataType : 'json',
success : function(data) {
if (data.returnCode == "0000") {
JEND.util.dialog.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.util.dialog.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 name = $.trim($("#brandName").val());
if (name) {
var nameen = $.trim($("#brandNameEn").val());
var brandLogo = $("#brandLogo").val();
var sort = $.trim($("#sort").val());
var displayFlag = $('input:radio:checked').val();
var brandRegCerUrl = $("#brandRegCerurl").val();
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);
$
.ajax({
type : "POST",
dataType : "json",
url : "${basePath }/brand/api/saveBrand.action",
data : {
brandName : name,
brandNameEn : nameen,
brandLogo : brandLogo,
displaySeq : sort,
displayFlag : displayFlag,
brandRegCerUrl : strSrc
},
beforeSend : function(data) {
$("#brandName_span").text("");
},
success : function(data) {
if (data.num == "200") {
boolClick = true;
$("#brandName_span").html("");

JEND.page.alert({
message: '添加品牌成功',
callback: function() {
window.location.href = "${basePath }/brand/queryBrandAll.action";
},
top:200,
closeKey: 'ESC'
});
} else if (data.num == "400") {
JEND.load('util.dialog', function() {
JEND.util.dialog.alert(data.message);
$("#brandName_span").html(data.message);
$("#brandName_span").css("color", "red");
$("#brandName").val("");

});
$("#brandName_span").html("");
} else if (data.num == "500") {
JEND.load('util.dialog', function() {
JEND.util.dialog.alert(data.message);
});
}
},
error : function() {
$("#brandName_span").html("error");
}
});
} else {
JEND.load('util.dialog', function() {
JEND.util.dialog.alert('品牌名字不能为空');
});

}

}

function returnclick() {
location = "${basePath }/brand/queryBrandAll.action";
}
function removeImage(obj) {
if ($(obj).attr('id') == "removelogo") {
$(obj).prev().attr('src', '');
$("#brandLogo").val("");
$(obj).remove();
} else {
var b = $(obj).prev().attr('src');
$("#uploadImg").attr("style",
"display:inline-block;margin-top:10px")
var brandId = $('#brandId').val();
$(obj).prev().remove();
$(obj).remove();
if ($("#brandRegCer img").length > 0) {
$("#uploadImg").attr("style",
"display:inline-block;margin-top:10px")
} else {
$("#uploadImg").attr("style",
"display:inline-block;margin-top:113px")
}
}

}
function checkName(){
$("#brandName_span").html("");
}
</script>
</head>
<body>
<div id="base" class="">

<div id="u50" class="text">
<p>
<span style="color: #0066CC;">   <a href="#" class="score-0">后台管理系统</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="#" name="addBrandForm" id="addBrandForm" method="post"
enctype="multipart/form-data">
<input id="brandLogo" name="brandLogo" type="hidden" /> <input
id="brandRegCerurl" name="brandRegCerurl" type="hidden" />
<table id="u0" border="1px" table-layout="fixed">
<tr>
<td width="100" align="left"><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>
</td>
<td><input id="brandName" name="brandName" type="text"
onfocus="checkName()" /> <span id="brandName_span"></span></td>
</tr>
<tr>
<td width="100" align="left"><span
style="font-family: 'Arial Normal', 'Arial'; font-weight: 400; color: #333333;">品牌英文名</span>
</td>
<td><input id="brandNameEn" name="brandNameEn" type="text"
onkeyup="value=value.replace(/[^w./]/ig,'')" value="" /></td>
</tr>
<tr style="height: 75px;">
<td width="75"><span></span><span>品牌Logo：</span></td>
<td valign="bottom" align="left">
<div id="logo" class="logo" align="left" style="display: inline">
<img id="brandLogoImage" src=""
style="display: inline-block; 100px; height: 100px;" />
</div>
<div style="display: inline">
<span> <input id="uploadPic_input" type="button"
value="选择图片" style="margin-top: 90px" /> <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; valign: baseline">
<td width="100" align="left">商标注册证明：</td>
<td class="tal pl10 img-td" style="valign: baseline">
<div id="brandRegCer" class="logo" align="left"
style="display: inline"></div>
<div>
<input type="button" value="选择图片" name="uploadImg" id="uploadImg"
margin-top="113px"
style="display: inline-block; margin-top: 113px" />

<span style="color: #333333;">正向放置、清晰、加盖红色公章, 文件格式要求为</span><span
style="color: #FF0000;">JPG、GIF、PNG、BMP</span><span
style="color: #333333;">中的一种，大小请限制在</span><span
style="color: #FF0000;">1M</span><span style="color: #333333;">以内</span><span
style="color: #333333;">。</span>

</div>
</td>
</tr>
<tr>
<td width="100" align="left"><span>排序</span></td>
<td><input id="sort" name="sort" type="text"
onkeyup="this.value=this.value.replace(/D/g,'')"
onafterpaste="this.value=this.value.replace(/D/g,'')" /></td>
</tr>
<tr>
<td width="100" align="left"><span></span><span>显示：</span></td>
<td><input type="radio" name="displayFlag" value="1" checked />是
<input type="radio" name="displayFlag" value="0" />不显示</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><br>
<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;">
<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;
}

#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;
}

tr {
height: 25px;
}

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

查看全文

相关阅读:
地铁线路问题分析
 软件工程大作业(社团管理系统)-个人总结报告
 第九组_社团管理系统_原型相关文档
 北京地铁线路出行和规划
 地铁线路规划
 WC 个人项目 ( node.js 实现 )
自我介绍 + 软工5问
 软工个人项目（Java实现）
自我介绍+软工五问
 结对编程（前后端分离）

原文地址：https://www.cnblogs.com/zhaoblog/p/5360061.html