js 截取上传图片示例 1

nj_apple_tree

浏览: 100114 次
性别:
来自: 上海

最近访客更多访客>>

sgq0085

sophialmy82

zzy7075

songdawei001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js logo 截图

JSP CSS jQuery JavaScript IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@page import="com.zte.appstore.sys.common.fs.action.Utils"%>
<%@ include file="/common/commons.jsp" %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/crlCheckCommons.js"></script>
<%
//remove cache
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>发布流程</title>
<style>
.mesWindow {
border: #85c5f5 1px solid;
background:#eaf8ff;
padding:5px;
}

.mesWindowTop {
border-bottom: #ccc 1px solid;
   padding:0 0 3px 32px;
   font-weight: bold;
text-align: left;
font-size: 12px;
}

.mesWindowContent {
margin-top:8px;
font-size: 12px;
}

.mesWindow.close {
height: 15px;
width: 28px;
cursor: pointer;
text-decoration:none;
color:#888786;
border:1px solid #b7b7b7;
background: #efefef
}
.headzd{background:url(../images/headbg1.gif) no-repeat;width:90px;height:47px;}
.mesWindowBottom{margin-top:5px;}
</style>

<link href="<%=request.getContextPath() %>/css/default/social.css" rel="stylesheet" type="text/css" />
<LINK href="<%=request.getContextPath() %>/css/imgAreaSelect/base.css" type=text/css
rel=stylesheet>
<LINK href="<%=request.getContextPath() %>/css/imgAreaSelect/projects.css" type="text/css" rel="stylesheet">
<LINK href="<%=request.getContextPath() %>/css/imgAreaSelect/imgareaselect-animated.css" type="text/css" rel="stylesheet">
<LINK href="<%=request.getContextPath() %>/css/imgAreaSelect/index.css" type="text/css" rel="stylesheet"></HEAD>

<script src="<%=request.getContextPath() %>/js/preview.js" type="text/javascript"></script>
<SCRIPT src="<%=request.getContextPath() %>/js/imgAreaSelect/jquery-1.4.3.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="<%=request.getContextPath() %>/js/imgAreaSelect/jquery.imgareaselect.pack.js" type="text/javascript"></SCRIPT>

</head>

<body>
<div id="fd1" >
<form name="form1" id="form1" action="" method="post"
enctype="multipart/form-data" target="hidden_frame"><input
type="hidden" id="cntexit" value="" /> <input
type="hidden" id="x" name="x" value="" /> <input type="hidden" id="y"
name="y" value="" /> <input type="hidden" id="width" name="width"
value="" /> <input type="hidden" id="height" name="height" value="" />
<input type="hidden" id="pic" name="pic" value="" />
<input type="hidden" id="prepic" name="prepic" value="" />
<input type="hidden" id="imageName" name="imageName" value="" />
<input type="hidden" id="imageNamecopy" name="imageNamecopy" value="" />
<input type="hidden" id="saveORnext" name="saveORnext" value=""/>
<div id="tabId1">
<ol class="step-arrow">
<li class="current"><a href="javascript:void(0);">1、作品基本信息</a>
</li>
<li class="last" id="lastcurrent"><a href="javascript:void(0);">2、上传作品软件包</a>
</li>
</ol>
<span id="biao"></span>
<table cellpadding="0" cellspacing="0" border="0" class="table2">
<tr>
<th><em>*</em><s:text name="cnt.content.cntname" /></th>
<td><input name="content.cntname" id="appName" type="text"
class="width140p input2" value="${content.cntname }" />
<span class="hint">长度不超过200个字符(汉字算三个字符)</span>
</td>
<th>作品版本</th>
<td><input name="content.cntversion" id="banben" type="text"
class="width140p input2" value="${content.cntversion }"
maxlength="18" /> <span class="hint">如1.0</span></td>
</tr>
<tr>
<th><em>*</em>作品分类</th>
<td><select class="width100p floatleft" name="content.catindex1"
id="select2">
<s:iterator value="category.{?#this.parentcatindex==0}">
<option value="${catindex}">${catname}</option>
</s:iterator>
</select>
<div id="yej" class="floatleft"><select class="width100p"
name="content.catindex2" id="select3">
<s:iterator value="category2">
<option value="${catindex}">${catname}</option>
</s:iterator>
</select></div>
</td>
<th><em>*</em>支持的语言</th>
<td><select name="content.language" id="yuyan" class="width140p">
<s:iterator value="msysCodeList1">
<option value="${codeid}">${codevalue}</option>
</s:iterator>
</select></td>
</tr>
<tr><th><em>*</em>价格</th>
<td colspan="3" ><input name="content.fee" id="fee" type="text" maxlength="5" class="width80p input2"
value="${content.fee}" onmousedown="this.oncontextmenu = function(){return false;}"/> 分    

<input type="checkbox" name="content.openfeint" value="1"/>是否含有openfeint插件
</td>
</tr>
<tr>
<th><em>*</em>下载选项</th>
<td colspan="3">
<select name="content.downloadtype" id="yuyan" class="width140p">
<s:iterator value="msysCodeList2">
<option value="${codeid}">${codevalue}</option>
</s:iterator>
</select>

</td>
</tr>
<tr>
<th><em>*</em>标签</th>
<td colspan="3"><input name="content.keywords" id="keywords2"
type="text" class="width360p input2" value="${content.keywords }" />
<a id="various1" href="#" onclick="javascript:testMessageBox(event);">常用标签列表</a>
<br />
<span class="hint">手动输入多个之间用","分开,每个标签的长度不能大于30个字符,最多5个(汉字算三个字符)</span></td>
<div id="keyword" style="display: none" align="center">
<s:iterator value="keywordList" status="i">
<label class='class0' for='a1' style="color:${searchcolor}"> <input type='checkbox'
value='${keyword}' class='keyword' />${keyword} </label>
<c:if test="${i.count%4==0}">
<br />
</c:if>
</s:iterator></div>
</tr>
<tr>
<th><em>*</em>作品说明</th>
<td colspan="3"><textarea rows="5" name="content.descriptiondoc"
id="yysm" class="width100">${content.descriptiondoc }</textarea> <span
class="hint">请在这输入有关此作品的说明,用途、特色、支持的平台类型等(2000个字符以内)您还可以输入2000个字符</span></td>
</tr>
<tr>
<th>操作指南</th>
<td colspan="3"><textarea rows="5" name="content.guidance"
id="guidance" class="width100">${content.guidance }</textarea> <span
class="hint">请在这输入有关此作品的操作指南,以便更快的通过审核(2000个字符以内）您还可以输入2000个字符</span></td>
</tr>
<tr>
<th>作品攻略</th>
<td colspan="3"><textarea rows="5" name="content.strategy"
id="strategy" class="width100">${content.strategy }</textarea> <span
class="hint">请在这输入有关此作品攻略的简要说明(2000个字符以内)您还可以输入2000个字符</span></td>
</tr>
<tr>
<th>版权</th>
<td colspan="3"><textarea rows="5" name="content.copyright"
id="copyright" class="width100">${content.copyright }</textarea> <span
class="hint">请在这输入版权声明</span></td>
</tr>
<tr>
<th>版权附件</th>
<td colspan="3"><span id="spanCopy"> <input type="file" name="copyrightfile" onchange="copyRightOnChange();"
id="copyrightfile" onkeydown="return false;" onmousedown="this.oncontextmenu = function(){return false;}"
class="width360p input2 marginbottom5p" size="40" value="" /></span> </td>
</tr>
<tr>
<th>用户自测情况表</th>
<td colspan="2"><span id="spanTest"><input type="file" name="testfile" id="testfile" onchange="testFileOnChange();"
onkeydown="return false;" onmousedown="this.oncontextmenu = function(){return false;}"
class="width360p input2 marginbottom5p"
size="40" value="" /></span></td>
<td><a href="<%=request.getContextPath() %>/download.action?fileindex=0">自测情况表模板</a></td>
</tr>
<tr>
<th>备注</th>
<td colspan="3"><textarea rows="5" name="content.description"
id="remarks" class="width100">${content.description }</textarea> <span
class="hint">请在这输入有关此作品的相关注意事项(2000个字符以内)您还可以输入2000个字符</span></td>
</tr>
<tr>
<th valign="top"><em>*</em>图标</th>
<td colspan="3">
<div id="upload">
<input type="file" name="image" id="image" onchange="onUploadImg('image')" onmousedown="this.oncontextmenu = function(){return false;}"
   onkeydown="return false;" class="width360p input2 marginbottom5p" size="40" /><br/>
图标尺寸大于88*88,文件大小0—2M,格式仅限 jpg png格式,截图用于手机客户端、web门户展示作品
</div>

<div>
<table width="100%" style="height: 100%">
<tr>
<td>
<DIV class="frame" style="MARGIN: 0px 0.3em; WIDTH: 200px;">
<p class="hint">按住鼠标左键选择图片区域，进行截取图片</p>
<IMG id="photo" src="<%=request.getContextPath() %>/images/preoriginal.gif" style="WIDTH: 200px; "> </DIV>

</td>
<td width="100%" style="height: 250px" align="center" valign="top";>

<table>
<tr>
<td width="100%" style="height: 130px" align="left" valign="top">
<DIV style="MARGIN: 1px 1em; WIDTH: 288px; HEIGHT: 120px; position:relative;">
<DIV class="frame" style="MARGIN: 1px 7em; WIDTH: 88px; HEIGHT: 88px; position:absolute;top:5px;">
<DIV id="preview" style="OVERFLOW: hidden; WIDTH: 88px; HEIGHT: 88px; position:absolute;">
<IMG style="WIDTH: 88px; HEIGHT: 88px; " src="<%=request.getContextPath() %>/images/preoriginal.gif">
</DIV></DIV></DIV>
                                    <div class="clear-both"></div>
</td>
</tr>
<tr >
<td width="100%" style="height: 15px" align="center"><input type="button" class="btns" value="保存截图" id="cutImage" /></td>
</tr>
<tr >
<td width="100%" style="height: 100px"><div id="saveImage"></div> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>

</tr>
<tr>
<th valign="top"><em>*</em>使用截图</th>
<td colspan="3">
<p class="hint">截图尺寸240*320,文件大小0—2M,格式仅限gif jpg png格式,截图用于手机客户端、web门户展示作品</p>
<div id="pic11"><input type="file" name="pic1"
id="pic1" onmousedown="this.oncontextmenu = function(){return false;}"
onchange="onUploadImg('pic1')"
onkeydown="return false;" class="width360p input2 marginbottom5p"
size="40" /></div>
<div id="pic21"><input type="file" name="pic2"
id="pic2" onmousedown="this.oncontextmenu = function(){return false;}"
onchange="onUploadImg('pic2')"
onkeydown="return false;" class="width360p input2 marginbottom5p"
size="40" /></div>
<div id="pic31"><input type="file" name="pic3"
id="pic3" onmousedown="this.oncontextmenu = function(){return false;}"
onchange="onUploadImg('pic3')"
onkeydown="return false;" class="width360p input2 marginbottom5p"
size="40" /></div>
<div id="pic41"><input type="file" name="pic4"
id="pic4" onmousedown="this.oncontextmenu = function(){return false;}"
onchange="onUploadImg('pic4')"
onkeydown="return false;" class="width360p input2 marginbottom5p"
size="40" /></div>
<div class="top-btm width500p" style="overflow: hidden">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="preview_fake1"><img
src="<%=request.getContextPath()%>/images/default.gif"
class="photo90-120p" id="p1" /></div>

</td>
<td>
<div id="preview_fake2"><img
src="<%=request.getContextPath()%>/images/default.gif"
class="photo90-120p" id="p2" /></div>
</td>
<td>
<div id="preview_fake3"><img
src="<%=request.getContextPath()%>/images/default.gif"
class="photo90-120p" id="p3" /></div>
</td>
<td>
<div id="preview_fake4"><img
src="<%=request.getContextPath()%>/images/default.gif"
class="photo90-120p" id="p4" /></div>
</td>
</tr>
<tr>
<td>
<div id="example1_div">default.gif</div>
<a href="javascript:void(0)"
onclick="runpicremove1('pic1','preview_fake1','p1','example1_div');">删除</a>
</td>
<td>
<div id="example2_div">default.gif</div>
<a href="javascript:void(0)"
onclick="runpicremove1('pic2','preview_fake2','p2','example2_div');">删除</a>
</td>
<td>
<div id="example3_div">default.gif</div>
<a href="javascript:void(0)"
onclick="runpicremove1('pic3','preview_fake3','p3','example3_div');">删除</a>
</td>
<td>
<div id="example4_div">default.gif</div>
<a href="javascript:void(0)"
onclick="runpicremove1('pic4','preview_fake4','p4','example4_div');">删除</a>
</td>
</tr>
</table>
<img id="preview_size_fake1" /> <img id="preview_size_fake2" /> <img
id="preview_size_fake3" /> <img id="preview_size_fake4" /></div>
</td>
</tr>
<tr>
<td class="textcenter" colspan="4"><input name="next"
type="button" value="返  回" class="btn" id="returnback"/>
    <input name="next"
type="button" value="保存草稿" id="saveTemp1" class="btn" />
     <input name="next" type="button" value="下一步"
id="next" class="btn" /></td>
</tr>
</table>
</div>
<iframe src="" name='hidden_frame' id="hidden_frame"
style='display: none'></iframe></form>
</div>

<div id="fd2" style="display: none">
<form name="form2" id="form2" action="" method="post"
enctype="multipart/form-data" target="hidden_frame"><s:property
value="#pageSession.cnt" /> <input type="hidden" name="count"
id="softnum" value="0" /> <input type="hidden" name="soft"
id="softname" value="" /> <input type="hidden" name="editid"
id="editid" value="" /> <input type="hidden" name="len" id="len"
value="" />
<input type="hidden" name="srcpath" id="srcpath" value="" />
<ol class="step-arrow">
<li class="currentpreview"><a href="javascript:void(0);"
id="headpre">1、作品基本信息</a></li>
<li class="lastcurrent"><a href="javascript:void(0);"
id="ruanjianbao">2、上传作品软件包</a></li>
</ol>
<table cellpadding="0" cellspacing="0" border="0" class="table2">
<tr>
<th><em>*</em>作品软件包</th>
<td>

<div id="bao"><span id ="spanSoft"><input type="file" name="softfile" id="softfile1" onchange="softOnChange();" onmousedown="this.oncontextmenu = function(){return false;}"
onkeydown="return false;" class="width360p input2 marginbottom5p"
size="40" /></span></div>
<span id="div_softname"></span>

</td>
</tr>
<tr>
<th>操作系统</th>
<td>
<s:iterator value="msysCodeList3" status="i">
<label >
<input type="checkbox" value="${codeid}" zhi="${codevalue}" class="oscheckbox" /> ${codevalue}
</label>
<c:if test="${i.count%6==0}">
<br />
</c:if>
</s:iterator>
<p class="hint">(操作系统都不选,则表示从终端库中筛选终端时不考虑操作系统,即把所有操作系统的机型都选出来)</p>
<h3 class="title clear-both">请选择子平台</h3>

<div id="zxtdiv" class="column150p"></div>
</td>
</tr>
<tr>
<th>仅支持Java</th>
<td><label for="isfou"> <input type="checkbox"
name="isfou" id="isfou" value="1" /> 是 </label>
<p class="hint">(如果不选,则表示从终端库中筛选终端时不考虑JAVA条件,即把所有JAVA和非JAVA的机型都选出来)</p>
</td>
</tr>
<tr>
<th>请选择屏幕分辨率</th>
<td>
<h3 class="title"><label for="all"> <input
type="checkbox" name="all" id="all" checked="true"
onClick="checkall();" /> 全选 </label></h3>
<div class="column100p">
<s:iterator value="mtmlResolutionList" status="i">
<lable>
<input type="checkbox" value="${resolutionindex}" class="cmpcheckbox"
zhi="2" name="cmp" checked="true" />${width}*${height} </lable>
<c:if test="${i.count%6==0}"> <br/> </c:if>
</s:iterator>
</div>
<p class="hint">(如果不选,则表示从终端库中筛选终端时不考虑分辨率，即把所有分辨率的机型都选出来)</p>
</td>
</tr>
<tr>
<td colspan="2" class="textcenter"><input type="button"
id="queryTerminal" value="筛选终端" class="btn-repeat margintb10p" /></td>
</tr>
<tr>
<th valign="top">请选择适用的品牌</th>
<td>
<div id="ppdiv"><select id="pinpai" name="pinpai"
class="width140p select1 marginbottom5p">
<option value="">--请选择--</option>
<s:iterator value="mtmlBrandList">
<option value="${brandindex}">${brandname}</option>
</s:iterator>
</select></div>
</td>
</tr>
<tr>
<th>机型名称</th>
<td><input name="jxss" id="jxss" type="text"
class="width140p input2" value="机型搜索" /> <input type="button"
value="搜索" class="btn-repeat" id="selectjx" /> <label class="color1"
for=""> <input id="zdlb" name="zdlb" type="checkbox"
value="0" /> 在已过滤的终端列表选择 </label></td>
</tr>
<tr>
<th>选择终端文件列表</th>
<td>

<input name="input22" type="button" class="btn-repeat" id="addTerminal" value="加载终端"/>
</td>
</tr>
<tr>
<td colspan="3">
<ul class="column5 clearfix">
<li>
<p style="height: 30px;">待选列表</p>
<div id="left_div"><select id="leftmodel" multiple="multiple" name="leftmodel"
class="simulation-textarea width180p" ondblclick="leftToMiddle();">

</select></div>
</li>
<li class="arrow"><input type="button" title="选择"
onClick="leftToMiddle();" class="singleright" /> <input
type="button" title="全部选择" onClick="leftToMiddleAll();"
class="moreright" />
<input type="button" title="删除单个" onclick="middleToLeftAndRight();" class="singleleft" />
<input type="button" title="全部删除" onClick="middleToLeftAndRightAll();" class="moreleft" /> <br />
<li>
<p style="height: 30px;">已选列表 <a href="javascript:void(0)"
id="delmiddle" onClick="MiddleRemove()">删除</a> <a
href="javascript:void(0)" id="various2">保存为终端组</a></p>
<select name="jx" id="middlemodel"
class="simulation-textarea width180p" multiple="multiple">

</select></li>
<li class="arrow"><input type="button" title="选择单个"
onclick="rightToMiddle();" class="singleleft" /> <input
type="button" title="全部选择" onClick="rightToMiddleAll();"
class=" moreleft" /> <br />
</li>
<li>
<div style="height: 30px;"><span id="ysq"> <select
name="userModelGroup" id="userModelGroup" style="width: 90px;"">
<option value="">--请选择--</option>
<s:iterator value="muserterminalgroupList">
<option value="${terminalgrpidx}"><tele:transfer str="${terminalgrpname}"/></option>
</s:iterator>
</select> </span> <label for="zdzsq"> <input id="zdzsq" type="checkbox"
name="zdzsq" /> 缺省终端组 </label></div>
<div id="model_div"><select name="rightmodel" id="rightmodel"
multiple="multiple" class="simulation-textarea width180p"
ondblclick="rightToMiddle();">
</select></div>
<div id="savTerminalGroupDiv" style="display: none;"><input type='button' value='确定'
onclick='savTerminalgroup()'></div>
</li>
</ul>

<div class="cut" id="tsdiv" style="display: none">成功保存软件包</div>
<div class="textcenter"><input name="addv_btn" type="button"
value="保存软件包" class="btn" id="btn_add" /> <span id="msg"></span>
</div>
</td>
</tr>
<tr>
<th>已上传软件包</th>
<td><span id="parentPackageA"></span></td>
</tr>
<tr>
<td class="textcenter" colspan="2"><input type="button"
name="input3" value="上一步" id="but3" class="btn" />    
<input type="button" name="input2" value="保存草稿" class="btn"
id="saveTemp2" />      <input type="button"
name="input1" value="提交" class="btn" id="but2" /></td>
</tr>
</table>
</form>

</div>

分享到：