基于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="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>

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、如果宽超过了并且高没有超，设置宽为最大值 
//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.