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

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

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

分类：?asp.Net?Ext Js2011-09-19 23:34?1946人阅读?评论(2)?收藏?举报

[javascript]?view plaincopyprint?

<!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>??
??????
????<link?href="extjs/resources/css/ext-all.css"?rel="stylesheet"?type="text/css"?/>??
??????
????<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"?},??

[javascript]?view plaincopyprint?

?????????????????????items:?[txtUserName,?txtUserPassword,?file],?buttons:?[{?text:?"登录",???
??
????????????????????handler:?login_click}],?id:?"loginFormPanel"?}??
????????????????]??
????????????});??
????????????win.show();??
????????});??
????</script>??
</head>??
<body>??
??
</body>??
</html>??

//Extjs1.aspx.cs

[csharp]?view plaincopyprint?

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();??
????}??
}??

效果预览如下：