基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

<form id="ff" runat="server" method="post"> 
<div id="content" style="margin-left:50px;"> 
<table style="width:300px;" id="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="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" 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> 
</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> 
</div> 
<%--显示大图标的区域--%> 
<div id="divimage" style="display: none;left:365px;top:40px;position: absolute"> 
<img id="imgbig" onclick="out();" src="" alt="大图" /> 
</div> 
</div> 
</form>

//显示图片 
function over(imgid, obj, imgbig) { 
//大图显示的最大尺寸 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 (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"; 
} 
//保存信息 
function 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 = $(":checkbox[name='type']").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?paintingname=" + 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.getelementbyid("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 { 
$.messager.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: "post", 
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 的摘要说明 
/// </summary> 
public class files : ihttphandler 
{ 
public void processrequest(httpcontext context) 
{ 
context.response.contenttype = "text/plain"; 
//图片名 
httpfilecollection files = context.request.files; 
if (files.count > 0) 
{ 
for (int i = 0; i < files.count; i++) 
{ 
httppostedfile file = files[i]; 
if (file.contentlength > 0) 
{ 
//全路径 
string fullfullname = file.filename; 
//获取图片的名称 
string filename = fullfullname.substring(fullfullname.lastindexof("\\") + 1); 
//保存路径d:\goodcommunitysystem2.0 - 副本\goodcommunitysystem\paint\img\ 
string path = "~/paint/img"; 
file.saveas(system.web.httpcontext.current.server.mappath(path) + "\\" + filename); 
} 
} 
} 
} 
public bool isreusable 
{ 
get 
{ 
return false; 
} 
} 
}</span>

/// <summary> 
/// painting 的摘要说明 
/// </summary> 
public class painting : ihttphandler 
{ 
paintingbll paintingbll = new paintingbll(); 
entity.paintingentity paintingentity = new entity.paintingentity(); 
public void processrequest(httpcontext context) 
{ 
context.response.contenttype = "text/plain"; 
string command = context.request["test"].tostring();//前台传的标示值 
if (command == "add") 
{ 
add(context); 
} 
} 
/// <summary> 
/// 添加记录 
/// </summary> 
/// <param name="context"></param> 
public void add(httpcontext context) 
{ 
paintingentity.paintingname = context.request.querystring["paintingname"]; 
paintingentity.paintingstyle = context.request.querystring["type"]; 
paintingentity.paintingurl = context.request.querystring["idfile"]; 
paintingentity.price = convert.toint32(context.request["price"]); 
paintingentity.addid = convert.toint32(context.request["addid"]); 
paintingentity.artistid = convert.toint32(context.request["artistid"]); 
paintingentity.height = convert.toint32(context.request.querystring["height"]); 
paintingentity.width = convert.toint32(context.request.querystring["width"]); 
try 
{ 
if (paintingbll.add(paintingentity)) 
{ 
context.response.write("t"); 
} 
else 
{ 
context.response.write("f"); 
} 
} 
catch (exception ex) 
{ 
throw ex; 
} 
} 
public bool isreusable 
{ 
get 
{ 
return false; 
} 
} 
}

<%--基础样式--%> 
<link href="../../themes/default/easyui.css" rel="stylesheet" /> 
<%--图标样式--%> 
<link href="../../themes/icon.css" rel="stylesheet" /> 
<%--easyui-js--js的文件有先有后min.js必须在前，easyui.min.js必须在后--%> 
<script src="../jquery.min.js"></script> 
<%--easyui 的js--%> 
<script charset="utf-8" src="../jquery.easyui.min.js"></script> 
<%--中文js--%> 
<script src="../locale/easyui-lang-zh_cn.js"></script> 
<%--上传图片时js--%> 
<script src="js/jquery.form.js"></script>

using system; 
using system.data; 
using system.collections.generic; 
using common; 
using entity; 
using dalfactory; 
using idal; 
namespace bll 
{ 
/// <summary> 
/// paintingbll 
/// </summary> 
public partial class paintingbll 
{ 
private readonly ipaintingdal dal=dataaccess.createpaintingdal(); 
public paintingbll() 
{} 
#region basicmethod 
/// <summary> 
/// 得到最大id 
/// </summary> 
public int getmaxid() 
{ 
return dal.getmaxid(); 
} 
/// <summary> 
/// 是否存在该记录 
/// </summary> 
public bool exists(int paintingid) 
{ 
return dal.exists(paintingid); 
} 
/// <summary> 
/// 增加一条数据 
/// </summary> 
public bool add(entity.paintingentity entity) 
{ 
return dal.add(entity); 
} 
/// <summary> 
/// 更新一条数据 
/// </summary> 
public bool update(entity.paintingentity entity) 
{ 
return dal.update(entity); 
} 
/// <summary> 
/// 删除一条数据 
/// </summary> 
public bool delete(int paintingid) 
{ 
return dal.delete(paintingid); 
} 
/// <summary> 
/// 删除一条数据 
/// </summary> 
public bool deletelist(string paintingidlist ) 
{ 
return dal.deletelist(paintingidlist ); 
} 
/// <summary> 
/// 得到一个对象实体 
/// </summary> 
public entity.paintingentity getentity(int paintingid) 
{ 
return dal.getentity(paintingid); 
} 
/// <summary> 
/// 得到一个对象实体，从缓存中 
/// </summary> 
public entity.paintingentity getentitybycache(int paintingid) 
{ 
string cachekey = "paintingentityentity-" + paintingid; 
object objentity = common.datacache.getcache(cachekey); 
if (objentity == null) 
{ 
try 
{ 
objentity = dal.getentity(paintingid); 
if (objentity != null) 
{ 
int entitycache = common.confighelper.getconfigint("entitycache"); 
common.datacache.setcache(cachekey, objentity, datetime.now.addminutes(entitycache), timespan.zero); 
} 
} 
catch{} 
} 
return (entity.paintingentity)objentity; 
} 
/// <summary> 
/// 获得数据列表 
/// </summary> 
public dataset getlist(string strwhere) 
{ 
return dal.getlist(strwhere); 
} 
/// <summary> 
/// 获得数据列表 
/// </summary> 
public dataset getpaintinglist(string strwhere) 
{ 
return dal.getpaintinglist(strwhere); 
} 
/// <summary> 
/// 获得前几行数据 
/// </summary> 
public dataset getlist(int top,string strwhere,string filedorder) 
{ 
return dal.getlist(top,strwhere,filedorder); 
} 
/// <summary> 
/// 获得数据列表 
/// </summary> 
public list<entity.paintingentity> getentitylist(string strwhere) 
{ 
dataset ds = dal.getlist(strwhere); 
return datatabletolist(ds.tables[0]); 
} 
/// <summary> 
/// 获得数据列表 
/// </summary> 
public list<entity.paintingentity> datatabletolist(datatable dt) 
{ 
list<entity.paintingentity> entitylist = new list<entity.paintingentity>(); 
int rowscount = dt.rows.count; 
if (rowscount > 0) 
{ 
entity.paintingentity entity; 
for (int n = 0; n < rowscount; n++) 
{ 
entity = dal.datarowtoentity(dt.rows[n]); 
if (entity != null) 
{ 
entitylist.add(entity); 
} 
} 
} 
return entitylist; 
} 
/// <summary> 
/// 获得数据列表 
/// </summary> 
public dataset getalllist() 
{ 
return getlist(""); 
} 
/// <summary> 
/// 分页获取数据列表 
/// </summary> 
public int getrecordcount(string strwhere) 
{ 
return dal.getrecordcount(strwhere); 
} 
/// <summary> 
/// 分页获取数据列表 
/// </summary> 
public dataset getlistbypage(string strwhere, string orderby, int startindex, int endindex) 
{ 
return dal.getlistbypage( strwhere, orderby, startindex, endindex); 
} 
/// <summary> 
/// 分页获取数据列表 
/// </summary> 
//public dataset getlist(int pagesize,int pageindex,string strwhere) 
//{ 
//return dal.getlist(pagesize,pageindex,strwhere); 
//} 
#endregion basicmethod 
#region extensionmethod 
#endregion extensionmethod 
} 
}