我的风格，先给大家展示下效果图，具体效果图如下所示，如果大家感觉还不错很满意请参考实现代码。
HTML的代码：
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 = "";
}
后台一般处理程序的代码：
上传图片的一般处理程序：
///
/// Files 的摘要说明
///
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;
}
}
}
提交表单的一般处理程序：
////// Painting 的摘要说明 /// 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); } } ////// 添加记录 /// /// 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：
<%--基础样式--%> <%--图标样式--%> <%--easyui-js--js的文件有先有后min.js必须在前，easyui.min.js必须在后--%> <%--easyui 的js--%> <%--中文js--%> <%--上传图片时js--%>
上传图片时，需要jquery.form.js的js文件，下载地址：http://download.csdn.net/detail/jiuqiyuliang/6919517
上传图片，并提交表单就是这么简单，一些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
{
///
/// paintingBLL
///
public partial class paintingBLL
{
private readonly IpaintingDAL dal=DataAccess.CreatepaintingDAL();
public paintingBLL()
{}
#region BasicMethod
///
/// 得到最大ID
///
public int GetMaxId()
{
return dal.GetMaxId();
}
///
/// 是否存在该记录
///
public bool Exists(int PaintingID)
{
return dal.Exists(PaintingID);
}
///
/// 增加一条数据
///
public bool Add(Entity.paintingEntity Entity)
{
return dal.Add(Entity);
}
///
/// 更新一条数据
///
public bool Update(Entity.paintingEntity Entity)
{
return dal.Update(Entity);
}
///
/// 删除一条数据
///
public bool Delete(int PaintingID)
{
return dal.Delete(PaintingID);
}
///
/// 删除一条数据
///
public bool DeleteList(string PaintingIDlist )
{
return dal.DeleteList(PaintingIDlist );
}
///
/// 得到一个对象实体
///
public Entity.paintingEntity GetEntity(int PaintingID)
{
return dal.GetEntity(PaintingID);
}
///
/// 得到一个对象实体，从缓存中
///
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;
}
///
/// 获得数据列表
///
public DataSet GetList(string strWhere)
{
return dal.GetList(strWhere);
}
///
/// 获得数据列表
///
public DataSet GetPaintingList(string strWhere)
{
return dal.GetPaintingList(strWhere);
}
///
/// 获得前几行数据
///
public DataSet GetList(int Top,string strWhere,string filedOrder)
{
return dal.GetList(Top,strWhere,filedOrder);
}
///
/// 获得数据列表
///
public List GetEntityList(string strWhere)
{
DataSet ds = dal.GetList(strWhere);
return DataTableToList(ds.Tables[0]);
}
///
/// 获得数据列表
///
public List DataTableToList(DataTable dt)
{
List EntityList = new List();
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;
}
///
/// 获得数据列表
///
public DataSet GetAllList()
{
return GetList("");
}
///
/// 分页获取数据列表
///
public int GetRecordCount(string strWhere)
{
return dal.GetRecordCount(strWhere);
}
///
/// 分页获取数据列表
///
public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
{
return dal.GetListByPage( strWhere, orderby, startIndex, endIndex);
}
///
/// 分页获取数据列表
///
//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提交图片)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！