《基于ASP.NETEasyUI框架实现图片上传提交表单功能js提交图片》由会员分享，可在线阅读，更多相关《基于ASP.NETEasyUI框架实现图片上传提交表单功能js提交图片（27页珍藏版）》请在金锄头文库上搜索。
1、精品文档 基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)这篇文章主要介绍了基于ASP.NET+EasyUI框架实现图片上传再提交表单(js提交图片)的相关资料,需要的朋友可以参考下 我的风格，先给大家展示下效果图，具体效果图如下所示，如果大家感觉还不错很满意请参考实现代码。 HTML的代码： <form id=“ff” runat=“server” method=“post” <div id=“content” style=“margin-left:50px;” <table style=“width:300px;” id
2、=“uniform” <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=“
3、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
4、:DropDownList </td </tr <tr <td书画价格：<input id=“price” 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
5、-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” run
6、at=“server” onchange=“javascript:setImagePreview(this,localImag,preview);” </td </tr <tr <td 预览: <div id=“localImag” style=“width: 300px; height: 200px;” <img id=“preview” alt=“预览图片” onclick=“over(preview,divImage,imgbig);” src=“././Paint/i
7、mg/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()”确定&l
8、t;/a <a href=“javascript:void(0)” class=“easyui-linkbutton” onclick=“clearForm()”取消</a </div <%-显示大图标的区域-% <div id=“divImage” style=“display: none;left:365px;top:40px;position: absolute” <img id=“imgbig” onclick=“out();” src=“ alt=“大图” / </div
9、 </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、如果宽超过了并且高没有超
10、，设置宽为最大值 /3、如果宽没超过并且高超过了，设置高为最大值 if (img.width maxwidth && img.height maxheight) pare = (img.width - maxwidth) - (img.height - maxheight); if (pare = 0) img.width = maxwidth; else img.height = maxheight; else if (img.width maxwidth &&
11、 img.height <= maxheight) img.width = maxwidth; else if (img.width <= maxwidth && img.height maxheight) img.height = maxheight; /隐藏图片 function out() document.getElementById(divImage).style.display = “none”; /保存信息&
12、nbsp; function submitForm() $.messager.confirm(提示, 你确定要添加此记录吗？, function (r) if (r) /先上传图片后，再提交 upLoadFile(); var test = document.getElementById(“test”).value = “add”; var paintingName = document.getElementById(“paintingName”).value; var artistID = docume
13、nt.getElementById(“ddlist”).value; var type = $(“:checkboxname=type”).attr(“checked”) = true ? “书法” : “国画”; var price = document.getElementById(“price”).value; var height = document.getElementById(“height”).value; var width = document.getElementById(“width”).value; var
14、idFile = document.getElementById(“idFile”).value; /先判断是否上传图片之后在提交 $(#ff).form(submit, url: “Painting.ashx?paintingName=“ + paintingName + “&artistID=“ + artistID + “&type=“ + type + “&price=“ + price + “&height=“ + height + “&width=“ + width + “&
15、;idFile=“ + idFile + “&addID=“ + addID + “&test=“ + test, dataType: “json”, onSubmit: function () return $(this).form(validate); , success: function (result) if (result = “T”) /清空文本框 document.getElementById(“paintingName”).value = “; document.getElementById(“price”).value = “; document.getElementById(“height”).value =
