上篇博客，我们简单的介绍了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.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文件，下载地址：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
{
/// <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框架的系列博文：
使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介
Asp.net之真假分页大揭秘、使用AspNetPager实现真分页
Asp.Net构架(Http请求处理流程)、Asp.Net 构架(Http Handler 介绍)、Asp.Net 构架(HttpModule 介绍)
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载
基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单
基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）
基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）
基于asp.net + easyui框架，一步步学习easyui-datagrid——实现添加、编辑、删除（三）
基于asp.net + easyui框架，一步步学习easyui-datagrid——完成，总结（四）
=========================================================================================================================
相关推荐
在本文档中，我们将探讨如何使用ASP.NET框架结合EasyUI前端库来实现一个图片上传并提交表单的功能，同时利用JavaScript进行交互。首先，我们来看一下HTML代码结构，它是整个功能的基础。 表单元素被定义在`<form>`...
ASP.NET 是 Microsoft 推出的一种用于构建 Web 应用程序的开发框架，它基于 .NET Framework，提供了丰富的服务器控件、事件驱动模型以及强大的开发工具支持，使得Web开发变得更加高效和便捷。EasyUI 是一个基于 ...
ASP.NET MVC是微软提供的一种用于构建Web应用程序的框架，它基于模型-视图-控制器（MVC）设计模式。这种模式允许开发者将业务逻辑、数据处理和用户界面清晰地分离，提高代码的可维护性和可测试性。在ASP.NET MVC中，...
**ASP.NET + EasyUI 帮助文档API详解** ASP.NET是微软公司推出的Web应用程序开发框架，它基于.NET Framework，提供了强大的服务器端编程模型。EasyUI则是一个基于jQuery的前端UI库，它使得开发者能够快速构建用户...
标题中的“asp.net+easyui案例详解+权限管理”揭示了这个压缩包文件包含的是一个使用ASP.NET技术和EasyUI框架实现的权限管理系统实例。在这个系统中，开发者可能详细讲解了如何将这两种技术结合来构建一个功能完备的...
基于***和EasyUI框架实现图片上传和表单提交的功能，涉及到Web前端和后端开发的多个知识点。以下为详细介绍： ***技术基础：***是微软推出的一个用于Web开发的开放源代码框架，运行于.NET平台上。它支持多种编程...
在本文中，我们将深入探讨如何基于ASP.NET和easyUI框架实现一个图片上传功能。ASP.NET是一种微软开发的服务器端Web应用程序框架，它提供了构建动态网站、Web应用和Web服务的强大支持。而easyUI是一个基于jQuery的UI...
EasyUI则在前端扮演了关键角色，它将.Net框架提供的API封装成易于使用的JavaScript接口，使得开发者可以通过简单的配置和调用，创建出功能丰富的后台管理界面。例如，通过EasyUI的datagrid组件，可以轻松展示后台...
ASP.NET MVC5与EasyUI是两个在Web应用开发中广泛使用的技术栈，它们结合在一起可以构建高效、可维护的企业级应用程序。在这个项目中，我们主要关注的是如何利用这两个技术进行企业开发。 首先，ASP.NET MVC5是微软...
MVC5（Model-View-Controller）是Microsoft开发的一款基于ASP.NET框架的Web应用开发模式，它鼓励分离关注点，使得开发者可以独立地处理业务逻辑、用户界面和应用程序控制。MVC5在之前的版本基础上进行了优化，提供了...
ASP.NET MVC5是一种微软开发的开源Web应用程序框架，它结合了ASP.NET Web Forms的事件驱动模型和MVC（Model-View-Controller）设计模式，为Web应用开发提供了更灵活、可测试的架构。该框架主要面向专业开发人员，...
ASP.NET、Web和MVC4.0是微软开发Web应用程序的重要技术栈，而EasyUI则是一款基于jQuery的UI框架，用于快速构建美观且响应式的前端界面。本教程将深入探讨如何利用这些技术构建一个权限管理系统，并通过源码分析来...
总的来说，这个基于ASP.NET MVC4+JQuery EasyUI的企业管理系统案例，结合了后端的强大框架和前端的易用库，实现了高效、美观且功能全面的企业管理功能。对于初学者来说，通过学习和实践这个案例，不仅可以深入了解这...
EasyUI是一个基于jQuery的UI库，提供了丰富的组件，如表格、下拉框、对话框等，可以方便地与ASP.NET MVC结合使用，实现界面的美化和交互。在本教程中，我们将探讨如何使用ASP.NET MVC和EasyUI实现附件上传功能。 ...
ASP.NET MVC5是一个基于Microsoft .NET Framework的开源Web应用程序框架，用于构建动态、数据驱动的Web应用程序。EasyUI则是一个基于jQuery的UI库，提供了丰富的界面组件，如表格、下拉框、对话框等，使得开发者可以...
综上所述，这个"基于ASP.NET MVC 4 + Knockout.JS + Web API + FluentData + EasyUI 通用权限管理"项目提供了一个全面的示例，涵盖了从后端服务开发到前端界面设计的全过程。对于想要学习和掌握这些技术的开发者来说...
ASP.NET MVC5、Entity Framework 6（EF6）和EasyUI是开发高效、现代Web应用程序的常用技术栈。本项目源码提供了一个完整的后台管理系统，适用于初学者和有一定经验的开发者进行学习和实践。 首先，ASP.NET MVC5是...