基于ASP.NET+EasyUI框架如何实现图片上传提交表单功能_程序开发

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

创始人

2024-11-28 11:21:34

0次

具体效果图如下所示

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

HTML的代码：

 
 
 
 
书画名称： 
 
 
书画类别：国画 
书法 
 
 
书画作者： 
 
 
 
书画价格：元 
 
 
高　　度：cm 
 
 
 
宽　　度：cm 
 
 
 
 
选择图片: 
 
 
 
 
预　　览:

确定取消

<%--显示大图标的区域--%>

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如何使用FCK编辑器中的分页符实现长文章分页功能

下一篇：ASP.NET+easyUI框架如何实现图片上传功能

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

相关内容

热门资讯