- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <!--ExtJs4.0官方下载ExtJs样式文件-->
- <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
- <!--ExtJs4.0官方下载ExtJs文件-->
- <script src="extjs/ext-all.js" type="text/javascript"></script>
- <script language="javascript" type="text/javascript">
- function login_click(b) {
- //1.拿到表单面板
- var loginFormPanel=Ext.getCmp("loginFormPanel");
- //2.通过面板对象拿到它里面的表单
- var form = loginFormPanel.getForm();
- //3.在提交前,判断表单输入是否有误
- if (!form.isValid()) {
- return;
- }
- //4.调用提交的方法,提交该表单
- form.submit({
- waitMsg:"正在向服务器提交数据",
- url:"Extjs1.aspx",
- success: function (f, a) {
- Ext.MessageBox.alert("提示", "你的详细信息如下:<br/>用户名:" + a.result.name + "<br/>密 码:" + a.result.password + "<br/>你上传的图片数量为:"
- + a.result.filecount);
- },
- failure: function (f,a) {
- Ext.MessageBox.alert("提示", a.result.msg);
- }
- });
- }
- Ext.onReady(function () {
- var txtUserName = new Ext.form.field.Text({
- fieldLabel: "用户名",
- labelWidth: 50,
- margin: "10 0 5 0",
- allowBlank: false,
- blankText: "用户名不能为空",
- name: "txtUserName"
- });
- var txtUserPassword = new Ext.form.field.Text({
- fieldLabel: "密 码",
- labelWidth: 50,
- margin: "5 0 5 0",
- inputType: "password",
- allowBlank: false,
- blankText: "密码不能为空",
- name: "txtUserPassword"
- });
- var file = new Ext.form.field.File({
- fieldLabel:"请选择一张图片",
- buttonText:"浏览",
- regex:/^.+\.(jpg|png|gif)$/,
- regexText:"你只能选择jpg,png,gif格式的图片"
- });
- var win = new Ext.window.Window({
- title: "提交数据——登录",
- height: 200,
- width: 350,
- layout: "fit",
- items: [
- { xtype: "form", frame: true, layout: { type: "vbox", align: "center" },
- items: [txtUserName, txtUserPassword, file], buttons: [{ text: "登录",
- handler: login_click}], id: "loginFormPanel" }
- ]
- });
- win.show();
- });
- </script>
- </head>
- <body>
- </body>
- </html>
//Extjs1.aspx.cs
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- public partial class Extjs1 : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- System.Threading.Thread.Sleep(3000);
- string name = Request.Form["txtUserName"];
- string password = Request.Form["txtUserPassword"];
- //.............................
- int pointIndex=Request.Files[0].FileName.LastIndexOf(".");
- string lastName=Request.Files[0].FileName.Substring(pointIndex);
- string fileName = new Random().Next(10000).ToString();
- string path = Server.MapPath("") + "/" + fileName + lastName;
- Request.Files[0].SaveAs(path);
- Response.Write("{success:true,msg:'成功',name:'"+name+"',password:'"+password+"',filecount:'"+Request.Files.Count+"'}");
- Response.End();
- }
- }
效果预览如下: