注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

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

2016-08-10 13:31:00|  分类: asp.net |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:http://blog.csdn.net/jiuqiyuliang/article/details/19161055

界面:

                                                                        

HTML的代码:

          

  1. <form id="ff" runat="server" method="post">  
  2.         <div id="content" style="margin-left:50px;">  
  3.         <table style="width:300px;" id="uniform">  
  4.         <tr>  
  5.             <td>书画名称:<input id="paintingName" class="easyui-validatebox" validType:'paintingName' type="text" name="paintingName" data-options="required:true"/></td>  
  6.         </tr>   
  7.         <tr>  
  8.             <td>书画类别:<input id="radPaint" value="国画" class="easyui-validatebox" name="type" type="radio" checked="checked" data-options="required:true" />国画  
  9.                 <input id="rad" name="type" class="easyui-validatebox" type="radio" data-options="required:true" />书法</td>  
  10.         </tr>  
  11.         <tr>  
  12.             <td>书画作者:<asp:DropDownList ID="ddlist" runat="server" Width="155px"></asp:DropDownList>  
  13.             </td>  
  14.         </tr>  
  15.         <tr>  
  16.             <td>书画价格:<input id="price" class="easyui-numberbox" type="text" name="price" data-options="required:true"/></td>  
  17.         </tr>  
  18.         <tr>  
  19.             <td>高  度:<input id="height" class="easyui-numberbox" type="text" name="height" data-options="required:true"/>cm</td>  
  20.         </tr>  
  21.         <tr>  
  22.             <td>  
  23.                 宽  度:<input id="width" class="easyui-numberbox" type="text" name="width" data-options="required:true"/>cm  
  24.             </td>  
  25.         </tr>  
  26.         <tr>  
  27.             <td>  
  28.                  选择图片:<asp:FileUpload ID="idFile" Width="150px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);">   
  29.             </td>  
  30.         </tr>  
  31.        <tr>  
  32.            <td>  
  33.                预  览:  
  34.                 <div id="localImag" style="width: 300px; height: 200px;">  
  35.                     <img id="preview" alt="预览图片" onclick="over(preview,divImage,imgbig);" src="../../Paint/img/default.jpg" width="300" height="200"/>  
  36.                 </div>  
  37.            </td>  
  38.        </tr>  
  39.     </table>  
  40.         <input type="hidden" id="test" name="test" />   
  41.         <div style="width:300px; text-align:center;">  
  42.             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">确定</a>  
  43.         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">取消</a>  
  44.         </div>   
  45.         <%--显示大图标的区域--%>    
  46.         <div id="divImage" style="display: none;left:365px;top:40px;position: absolute">    
  47.             <img id="imgbig" onclick="out();" src="" alt="大图" />    
  48.         </div>    
  49.     </div>  
  50.     </form>  

JS代码:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1.          
  2.   //显示图片    
  3.         function over(imgid, obj, imgbig) {  
  4.             //大图显示的最大尺寸  4比3的大小  400 300    
  5.             maxwidth = 400;  
  6.             maxheight = 300;  
  7.   
  8.   
  9.             //显示    
  10.             obj.style.display = "";  
  11.             imgbig.src = imgid.src;  
  12.   
  13.   
  14.             //1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3    
  15.             //2、如果宽超过了并且高没有超,设置宽为最大值    
  16.             //3、如果宽没超过并且高超过了,设置高为最大值    
  17.   
  18.   
  19.             if (img.width > maxwidth && img.height > maxheight) {  
  20.                 pare = (img.width - maxwidth) - (img.height - maxheight);  
  21.                 if (pare >= 0)  
  22.                     img.width = maxwidth;  
  23.                 else  
  24.                     img.height = maxheight;  
  25.             }  
  26.             else if (img.width > maxwidth && img.height <= maxheight) {  
  27.                 img.width = maxwidth;  
  28.             }  
  29.             else if (img.width <= maxwidth && img.height > maxheight) {  
  30.                 img.height = maxheight;  
  31.             }  
  32.         }  
  33.   
  34.   
  35.         //隐藏图片    
  36.         function out() {  
  37.             document.getElementById('divImage').style.display = "none";  
  38.         }  
  39.   
  40.  //保存信息  
  41.         function submitForm() {  
  42.             $.messager.confirm('提示''你确定要添加此记录吗?'function (r) {  
  43.                 if (r) {  
  44.                     //先上传图片后,再提交  
  45.                     upLoadFile();  
  46.   
  47.                     var test = document.getElementById("test").value = "add";  
  48.                     var paintingName = document.getElementById("paintingName").value;  
  49.                     var artistID = document.getElementById("ddlist").value;  
  50.                     var type = $(":checkbox[name='type']").attr("checked") == true ? "书法" : "国画";  
  51.                     var price = document.getElementById("price").value;  
  52.                     var height = document.getElementById("height").value;  
  53.                     var width = document.getElementById("width").value;  
  54.                     var idFile = document.getElementById("idFile").value;  
  55.   
  56.                     //先判断是否上传图片之后在提交  
  57.   
  58.                     $('#ff').form('submit', {  
  59.                         url: "Painting.ashx?paintingName=" + paintingName + "&artistID=" + artistID +  
  60.                              "&type=" + type + "&price=" + price + "&height=" + height + "&width=" + width +  
  61.                             "&idFile=" + idFile + "&addID=" + addID + "&test=" + test,  
  62.                         dataType: "json",  
  63.                         onSubmit: function () {  
  64.                             return $(this).form('validate');  
  65.                         },  
  66.                         success: function (result) {  
  67.                             if (result == "T") {  
  68.                                 //清空文本框  
  69.                                 document.getElementById("paintingName").value = "";  
  70.                                 document.getElementById("price").value = "";  
  71.                                 document.getElementById("height").value = "";  
  72.                                 document.getElementById("width").value = "";  
  73.                                 document.getElementById("idFile").value = "";  
  74.                                 document.getElementById("preview").value = "";  
  75.                                 $.messager.alert('提示''恭喜您,信息添加成功!''info');  
  76.                             }  
  77.                             else {  
  78.                                 $.messager.alert('提示''保存失败,请您核对!''info');  
  79.                             }  
  80.                         }  
  81.                     });  
  82.                 }  
  83.             });  
  84.         }  
  85.   
  86.         //上传图片  
  87.         function upLoadFile() {  
  88.             var idFile = document.getElementById("idFile").value;  
  89.             //判断是否选择图片  
  90.             if (idFile == null || idFile == "") {  
  91.                 $.messager.alert('提示','请添加图片!');  
  92.                 document.getElementById("idFile").focus();  
  93.                 document.getElementById("idFile").select();  
  94.                 return;  
  95.             }  
  96.             var options = {  
  97.                 type: "POST",  
  98.                 url: 'Files.ashx',  
  99.                 //success: showResponse  
  100.             };  
  101.             // 将options传给ajaxForm  
  102.             $('#ff').ajaxSubmit(options);  
  103.         }  
  104.         //function showResponse() {  
  105.         //    alert("上传成功!");  
  106.         //}  
  107.   
  108.   
  109.         function clearForm(){  
  110.            //清空文本框  
  111.            document.getElementById("paintingName").value = "";  
  112.            document.getElementById("price").value = "";  
  113.            document.getElementById("height").value = "";  
  114.            document.getElementById("width").value = "";  
  115.            document.getElementById("idFile").value = "";  
  116.          }  


后台一般处理程序的代码:

上传图片的一般处理程序:

[csharp] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:14px;"/// <summary>  
  2.     /// Files 的摘要说明  
  3.     /// </summary>  
  4.     public class Files : IHttpHandler  
  5.     {  
  6.   
  7.         public void ProcessRequest(HttpContext context)  
  8.         {  
  9.             context.Response.ContentType = "text/plain";  
  10.             //图片名  
  11.             HttpFileCollection files = context.Request.Files;  
  12.             if (files.Count > 0)  
  13.             {  
  14.                 for (int i = 0; i < files.Count; i++)  
  15.                 {  
  16.                     HttpPostedFile file = files[i];  
  17.   
  18.                     if (file.ContentLength > 0)  
  19.                     {  
  20.                         //全路径  
  21.                         string FullFullName = file.FileName;  
  22.                         //获取图片的名称  
  23.                         String fileName = FullFullName.Substring(FullFullName.LastIndexOf("\\") + 1);  
  24.                         //保存路径D:\GoodCommunitySystem2.0 - 副本\GoodCommunitySystem\Paint\img\  
  25.                         string path = "~/Paint/img";  
  26.                         file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path) + "\\" + fileName);  
  27.                     }  
  28.                 }  
  29.             }  
  30.         }  
  31.   
  32.         public bool IsReusable  
  33.         {  
  34.             get  
  35.             {  
  36.                 return false;  
  37.             }  
  38.         }  
  39.     }</span>  

提交表单的一般处理程序:

[csharp] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. /// <summary>  
  2.   /// Painting 的摘要说明  
  3.   /// </summary>  
  4.   public class Painting : IHttpHandler  
  5.   {  
  6.       paintingBLL paintingbll = new paintingBLL();  
  7.   
  8.       Entity.paintingEntity paintingEntity = new Entity.paintingEntity();  
  9.   
  10.       public void ProcessRequest(HttpContext context)  
  11.       {  
  12.           context.Response.ContentType = "text/plain";  
  13.           string command = context.Request["test"].ToString();//前台传的标示值  
  14.           if (command == "add")  
  15.           {  
  16.               Add(context);  
  17.           }  
  18.       }  
  19.       /// <summary>  
  20.       /// 添加记录  
  21.       /// </summary>  
  22.       /// <param name="context"></param>  
  23.       public void Add(HttpContext context)  
  24.       {  
  25.   
  26.           paintingEntity.PaintingName = context.Request.QueryString["paintingName"];  
  27.           paintingEntity.PaintingStyle = context.Request.QueryString["type"];  
  28.           paintingEntity.PaintingURL = context.Request.QueryString["idFile"];  
  29.           paintingEntity.Price = Convert.ToInt32(context.Request["price"]);  
  30.           paintingEntity.AddID = Convert.ToInt32(context.Request["addID"]);  
  31.           paintingEntity.ArtistID = Convert.ToInt32(context.Request["artistID"]);  
  32.           paintingEntity.Height = Convert.ToInt32(context.Request.QueryString["height"]);  
  33.           paintingEntity.Width = Convert.ToInt32(context.Request.QueryString["width"]);  
  34.           try  
  35.           {  
  36.               if (paintingbll.Add(paintingEntity))  
  37.               {  
  38.                   context.Response.Write("T");  
  39.               }  
  40.               else  
  41.               {  
  42.                   context.Response.Write("F");  
  43.               }  
  44.           }  
  45.   
  46.           catch (Exception ex)  
  47.           {  
  48.               throw ex;  
  49.           }  
  50.       }  
  51.       public bool IsReusable  
  52.       {  
  53.           get  
  54.           {  
  55.               return false;  
  56.           }  
  57.       }  
  58.   }  

需要引入的js:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <%--基础样式--%>  
  2. <link href="../../themes/default/easyui.css" rel="stylesheet" />  
  3. <%--图标样式--%>  
  4. <link href="../../themes/icon.css" rel="stylesheet" />  
  5.  <%--easyui-js--js的文件有先有后min.js必须在前,easyui.min.js必须在后--%>  
  6. <script src="../jquery.min.js"></script>  
  7. <%--easyui 的js--%>  
  8. <script charset="utf-8" src="../jquery.easyui.min.js"></script>  
  9. <%--中文js--%>  
  10. <script src="../locale/easyui-lang-zh_CN.js"></script>  
  11.   
  12. <%--上传图片时js--%>  
  13. <script src="js/jquery.form.js"></script>  

         上传图片时,需要jquery.form.js的js文件,下载地址:http://download.csdn.net/detail/jiuqiyuliang/6919517

       

       上传图片,并提交表单就是这么简单,一些js代码+一般处理程序,相信你一看就会。后面的博客我会更新一些关于easyui-datagrid的相关博客,敬请期待。

  评论这张
 
阅读(81)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017