• 基于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——完成,总结(四)

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

  • 相关阅读:
    mysql 按出现次数排序
    拼接sql
    java 操作 excel
    jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
    android压力测试命令monkey详解
    java css
    iss 默认上传大小为30 M
    PHP自动生成后台导航网址的最佳方法
    PHP 文件上传的综合实例
    php字符串首字母转换大小写的实例
  • 原文地址:https://www.cnblogs.com/ainima/p/6331027.html
Copyright © 2020-2023  润新知