没有合适的资源?快使用搜索试试~ 我知道了~
【ASP.NET编程知识】基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片).docx
0 下载量 171 浏览量
2023-05-21
19:46:14
上传
评论
收藏 76KB DOCX 举报
温馨提示
试读
26页
【ASP.NET编程知识】基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片).docx
资源推荐
资源详情
资源评论
全文可编辑 word 文档 页眉与背景水印可删除
1
基于 ASP.NET+EasyUI 框架实现图片上传提
交表单功能(js 提交图片)
我的风格,先给大家展示下效果图,具体效果图如下所
示,如果大家感觉还不错很满意请参考实现代码。
HTML 的代码:
<form id="ff" runat="server" method="post">
<div id="content" style="margin-left:50px;">
<table style="width:300px;" id="uniform">
全文可编辑 word 文档 页眉与背景水印可删除
2
<tr>
<td> 书 画 名 称 : <input id="paintingName"
class="easyui-validatebox" validType:'paintingName'
type="text" name="paintingName"
data-options="required:true"/></td>
</tr>
<tr>
<td>书画类别:<input id="radPaint" value="国画"
class="easyui-validatebox" name="type" type="radio"
checked="checked" data-options="required:true" /> 国
画
<input id="rad" name="type"
class="easyui-validatebox" type="radio"
data-options="required:true" />书法</td>
</tr>
<tr>
<td> 书 画 作 者 : <asp:DropDownList ID="ddlist"
runat="server" Width="155px"></asp:DropDownList>
</td>
</tr>
<tr>
<td> 书 画 价 格 : <input id="price"
全文可编辑 word 文档 页眉与背景水印可删除
3
class="easyui-numberbox" type="text" name="price"
data-options="required:true"/>元</td>
</tr>
<tr>
<td> 高 度 : <input id="height"
class="easyui-numberbox" type="text" name="height"
data-options="required:true"/>cm</td>
</tr>
<tr>
<td>
宽 度 : <input id="width"
class="easyui-numberbox" type="text" name="width"
data-options="required:true"/>cm
</td>
</tr>
<tr>
<td>
选 择 图 片 :<asp:FileUpload ID="idFile"
Width="150px" runat="server"
onchange="javascript:setImagePreview(this,localImag,
preview);">
</td>
全文可编辑 word 文档 页眉与背景水印可删除
4
</tr>
<tr>
<td>
预 览:
<div id="localImag" style="width: 300px; height:
200px;">
<img id="preview" alt=" 预 览 图 片 "
onclick="over(preview,divImage,imgbig);"
src="../../Paint/img/default.jpg" width="300"
height="200"/>
</div>
</td>
</tr>
</table>
<input type="hidden" id="test" name="test" />
<div style="width:300px; text-align:center;">
<a href="javascript:void(0)"
class="easyui-linkbutton" onclick="submitForm()"> 确
定</a>
<a href="javascript:void(0)"
class="easyui-linkbutton" onclick="clearForm()">取消
</a>
全文可编辑 word 文档 页眉与背景水印可删除
5
</div>
<%--显示大图标的区域--%>
<div id="divImage" style="display:
none;left:365px;top:40px;position: absolute">
<img id="imgbig" onclick="out();" src="" alt="大
图" />
</div>
</div>
</form>
JS 代码:
//显示图片
function over(imgid, obj, imgbig) {
//大图显示的最大尺寸 4 比 3 的大小 400 300
maxwidth = 400;
maxheight = 300;
//显示
obj.style.display = "";
imgbig.src = imgid.src;
//1、宽和高都超过了,看谁超过的多,谁超的多就将
谁设置为最大值,其余策略按照 2、3
//2、如果宽超过了并且高没有超,设置宽为最大值
剩余25页未读,继续阅读
资源评论
mmoo_python
- 粉丝: 0
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功