基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单

         上篇博客，我们简单的介绍了js实现上传图片之前判断图片格式，同时实现预览。这篇博客，给大家介绍如何上传图片，上传成功之后，再提交表单。下面我们进入正题：

       像前面的博客一样，先给大家看一下界面，这样更简单，便于理解。

界面：

                                                                        

HTML的代码：

          

<form id="ff" runat="server" method="post">
        <div id="content" style="margin-left:50px;">
        <table style="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=" 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="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 - 副本GoodCommunitySystemPaintimg
                        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前端页面开发总结

Asp.net 一般处理程序+扩展

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——完成，总结（四）

=========================================================================================================================