《基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)_.docx》由会员分享，可在线阅读，更多相关《基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)_.docx（10页珍藏版）》请在三一文库上搜索。
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=uniform tr td书画名称：input id=paintingNam
2、e 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
3、 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 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 da
4、ta-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 /tr tr td 预览: div id=localImag st
5、yle=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 on
6、click=submitForm()确定/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 /div /form JS代码： /显示图片 function over(imgid, obj, imgbig) /大图显示
7、的最大尺寸 4比3的大小 400 300 maxwidth = 400; maxheight = 300; /显示 obj.style.display = ; imgbig.src = imgid.src; /1、宽和高都超过了，看谁超过的多，谁超的多就将谁设置为最大值，其余策略根据2、3 /2、假如宽超过了并且高没有超，设置宽为最大值 /3、假如宽没超过并且超群过了，设置高为最大值 if (img.width maxwidth img.height maxheight) pare = (img.width - maxwidth) - (img.height - maxheight); if
8、(pare = 0) img.width = maxwidth; else img.height = maxheight; else if (img.width maxwidth 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; /保存信息 funct
9、ion submitForm() $.messager.confirm(提示, 你确定要添加此记录吗？, function (r) if (r) /先上传图片后，再提交 upLoadFile(); var test = document.getElementById(test).value = add; var paintingName = document.getElementById(paintingName).value; var artistID = document.getElementById(ddlist).value; var type = $(:checkboxname=ty
10、pe).attr(checked) = true ? 书法 : 国画; var price = document.getElementById(price).value; var height = document.getElementById(height).value; var width = document.getElementById(width).value; var idFile = document.getElementById(idFile).value; /先推断是否上传图片之后在提交 $(#ff).form(submit, url: Painting.ashx?paint
11、ingName= + paintingName + artistID= + artistID + type= + type + price= + price + height= + height + width= + width + idFile= + idFile + addID= + addID + test= + test, dataType: json, onSubmit: function () return $(this).form(validate); , success: function (result) if (result = T) /清空文本框 document.get
12、ElementById(paintingName).value = ; document.getElementById(price).value = ; document.getElementById(height).value = ; document.getElementById(width).value = ; document.getElementById(idFile).value = ; document.getElementById(preview).value = ; $.messager.alert(提示, 恭喜您，信息添加胜利！, info); else $.message
13、r.alert(提示, 保存失败，请您核对！, info); ); ); /上传图片 function upLoadFile() var idFile = document.getElementById(idFile).value; /推断是否选择图片 if (idFile = null | idFile = ) $.messager.alert(提示,请添加图片!); document.getElementById(idFile).focus(); document.getElementById(idFile).select(); return; var options = type: PO
14、ST, url: Files.ashx, /success: showResponse ; / 将options传给ajaxForm $(#ff).ajaxSubmit(options); /function showResponse() / alert(上传胜利!); / function clearForm() /清空文本框 document.getElementById(paintingName).value = ; document.getElementById(price).value = ; document.getElementById(height).value = ; document.getElementById(width).value = ; document.getElementById(idFile).value = ; 后台一般处理程序的代码： 上传图片的一般处理程序： span style=font-size:14px; / summary / Files 的