您的位置: 首页  >  IT文章  >  ASP.NET+ExtJs4.0+表单提交submit,下传图片到服务器(转)

ASP.NET+ExtJs4.0+表单提交submit,下传图片到服务器(转)

分类: IT文章 • 2024-03-17 11:05:55
ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器(转)

ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器

分类： asp.Net Ext Js2011-09-19 23:34 1946人阅读 评论(2) 收藏 举报
[javascript] view plaincopyprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title></title>  
  6.     <!--ExtJs4.0官方下载ExtJs样式文件-->  
  7.     <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />  
  8.     <!--ExtJs4.0官方下载ExtJs文件-->  
  9.     <script src="extjs/ext-all.js" type="text/javascript"></script>  
  10.     <script language="javascript" type="text/javascript">  
  11.         function login_click(b) {  
  12.             //1.拿到表单面板  
  13.             var loginFormPanel=Ext.getCmp("loginFormPanel");  
  14.             //2.通过面板对象拿到它里面的表单  
  15.             var form = loginFormPanel.getForm();  
  16.             //3.在提交前，判断表单输入是否有误  
  17.             if (!form.isValid()) {  
  18.                 return;  
  19.             }  
  20.             //4.调用提交的方法，提交该表单  
  21.             form.submit({  
  22.                 waitMsg:"正在向服务器提交数据",  
  23.                 url:"Extjs1.aspx",  
  24.                 success: function (f, a) {  
  25.                     Ext.MessageBox.alert("提示", "你的详细信息如下：<br/>用户名：" + a.result.name + "<br/>密　码：" + a.result.password + "<br/>你上传的图片数量为："   
  26.   
  27. + a.result.filecount);  
  28.                 },  
  29.                 failure: function (f,a) {  
  30.                     Ext.MessageBox.alert("提示", a.result.msg);  
  31.                 }  
  32.             });  
  33.         }  
  34.         Ext.onReady(function () {  
  35.             var txtUserName = new Ext.form.field.Text({  
  36.                 fieldLabel: "用户名",  
  37.                 labelWidth: 50,  
  38.                 margin: "10 0 5 0",  
  39.                 allowBlank: false,  
  40.                 blankText: "用户名不能为空",  
  41.                 name: "txtUserName"  
  42.             });  
  43.             var txtUserPassword = new Ext.form.field.Text({  
  44.                 fieldLabel: "密　码",  
  45.                 labelWidth: 50,  
  46.                 margin: "5 0 5 0",  
  47.                 inputType: "password",  
  48.                 allowBlank: false,  
  49.                 blankText: "密码不能为空",  
  50.                 name: "txtUserPassword"  
  51.             });  
  52.             var file = new Ext.form.field.File({  
  53.                 fieldLabel:"请选择一张图片",  
  54.                 buttonText:"浏览",  
  55.                 regex:/^.+\.(jpg|png|gif)$/,  
  56.                 regexText:"你只能选择jpg,png,gif格式的图片"  
  57.             });  
  58.             var win = new Ext.window.Window({  
  59.                 title: "提交数据——登录",  
  60.                 height: 200,  
  61.                 width: 350,  
  62.                 layout: "fit",  
  63.                 items: [  
  64.                     { xtype: "form", frame: true, layout: { type: "vbox", align: "center" },  
[javascript] view plaincopyprint?
  1.                      items: [txtUserName, txtUserPassword, file], buttons: [{ text: "登录",   
  2.   
  3.                     handler: login_click}], id: "loginFormPanel" }  
  4.                 ]  
  5.             });  
  6.             win.show();  
  7.         });  
  8.     </script>  
  9. </head>  
  10. <body>  
  11.   
  12. </body>  
  13. </html>  


//Extjs1.aspx.cs

[csharp] view plaincopyprint?
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class Extjs1 : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.         System.Threading.Thread.Sleep(3000);  
  13.         string name = Request.Form["txtUserName"];  
  14.         string password = Request.Form["txtUserPassword"];  
  15.           
  16.         //.............................  
  17.         int pointIndex=Request.Files[0].FileName.LastIndexOf(".");  
  18.         string lastName=Request.Files[0].FileName.Substring(pointIndex);  
  19.         string fileName = new Random().Next(10000).ToString();  
  20.         string path = Server.MapPath("") + "/" + fileName + lastName;  
  21.         Request.Files[0].SaveAs(path);  
  22.         Response.Write("{success:true,msg:'成功',name:'"+name+"',password:'"+password+"',filecount:'"+Request.Files.Count+"'}");  
  23.         Response.End();  
  24.     }  
  25. }  


效果预览如下：

ASP.NET+ExtJs4.0+表单提交submit,下传图片到服务器(转)

相关推荐