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

我的风格，先给大家展示下效果图，具体效果图如下所示，如果大家感觉还不错很满意请参考实现代码。

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：

上传图片，并提交表单就是这么简单，一些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提交图片)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！