我的风格，先给大家展示下效果图，具体效果图如下所示，如果大家感觉还不错很满意请参考实现代码。
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.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;
}
}
}
需要引入的js：
<%--基础样式--%>
<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>
上传图片时，需要jquery.form.js的js文件，下载地址：
上传图片，并提交表单就是这么简单，一些js代码+一般处理程序，相信你一看就会。后面的博客我会更新一些关于easyui-datagrid的相关博客，敬请期待。
最近有网友，总觉得看的还不是太明白，能不能将paintingbll和paintingentity代码贴一下-----新人求罩，我个人觉得实体层就没有必要了，下面我就将paintingbll的源码粘一下，仅供大家参考。
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
}
}
以上所述是小编给大家介绍的基于asp.net+easyui框架实现图片上传提交表单功能(js提交图片)，希望对大家有所帮助