`
endual
  • 浏览: 3560865 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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. }  


效果预览如下：

分享到：
| EXTJS 4 form population with JSON read
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs结合Asp.net文件上传

    标题中的“Extjs结合Asp.net文件上传”指的是在Web应用程序开发中，使用Ext JS（一个JavaScript库）和ASP.NET（Microsoft的服务器端技术）来实现文件上传功能。这一组合可以提供用户友好的界面和强大的后台处理能力...

    ExtJs、ASP.net运用Linq to SQL与SQL储存过程交互.

    2. **设置表单提交方式**：配置FormPanel的submit方法，指定服务器端处理脚本的URL。 3. **服务器端处理**：服务器端（ASP.net）接收请求，并对提交的数据进行验证、处理或存储。 ##### 1.3 前台更新、删除(store....

    dot net+Extjs 实现文件的上传下载

    综上所述，`.NET+ExtJS`实现文件上传下载涉及到的技术点包括：C#中的文件操作、ASP.NET的HTTP处理程序、`ExtJS`的Ajax表单提交、HTTP响应头的设置以及数据库中的BLOB存储。这些技术共同构成了一个完整的文件管理解决...

    EXT提交表单，ASP.NET

    在这个例子中，EXTJS表单提交的数据会被自动绑定到ASP.NET控制器的方法参数上。成功或失败的响应会被EXTJS的`success`或`failure`回调函数处理。 总结起来，EXTJS与ASP.NET的结合，使得前端能够构建美观且功能丰富...

    Extjs图片上传 带过滤和缩略图

    ExtJS仅负责前端的交互和数据传递，服务器端（如Asp.net）需要处理实际的文件接收和存储。你需要编写对应的服务器端代码来接收上传的文件，验证其合法性，然后将其保存到服务器的指定位置。 6. **错误处理**： 在...

    extjs 上传图片（可以上传其他类型的文件）asp 实现

    在本文中，我们将深入探讨如何使用ExtJS框架与ASP（Active Server Pages）技术结合，实现一个功能完善的文件上传功能，特别是针对图片和其他类型文件的上传。ExtJS是一款强大的JavaScript库，用于构建桌面级的Web...

    Extjs4后台框架、多文件上传

    4. **服务器端处理**：在后台，可能使用了ASP.NET MVC或者WebAPI来接收和处理上传的文件。这涉及到文件流读取、存储、验证以及错误处理。 5. **安全考虑**：文件上传需要考虑防止恶意文件上传，例如检查文件类型、...

    ExtJs做的用户登陆!ASP后台

    ExtJS是一种基于JavaScript的富客户端应用开发框架，主要用于构建交互式的Web应用程序。它提供了一套完整的组件模型、数据绑定机制以及丰富的用户界面组件，使得开发者能够创建出具有桌面应用程序般用户体验的网页...

    EXTJS-upload.rar_extjs

    3. **上传处理器（Upload Handler）**：EXTJS自身并不直接处理文件的服务器端上传，这部分需要后端支持，如PHP、ASP.NET或Node.js等。服务器端需要接收并处理上传的文件，可能涉及文件验证、存储、重命名等操作。 4...

    Extjs和数据库交互，增删改查

    FormPanel则用于创建表单，用户填写信息后，通过表单的submit方法将数据发送到服务器。 总结，ExtJS 在与数据库交互时，主要依赖数据模型、存储、代理和各种组件。通过这些工具，开发者能方便地实现Web应用的数据...

    ExtJs 登陆框、框架

    在这个事件处理函数中，可以调用FormPanel的submit方法，将表单数据发送到C#后端服务器进行验证。 C#后端通常会提供一个API接口，例如ASP.NET MVC或Web API，接收并处理这些登录请求。服务器端的代码会检查输入的...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为（Ajax提交）(feedback:261629698)。 +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数，用来向TabStrip控件动态增加删除Tab。...

    ext文件上传下载

    如果这个压缩包包含了EXTJS的文件上传下载示例，解压后可能包含HTML、JavaScript和CSS文件，以及可能的服务器端脚本如PHP或ASP.NET，用于接收和处理上传的文件。实际操作时，需要结合这些文件来理解和学习EXTJS的...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有ViewState，没有JavaScript，没有CSS，没有...

    coolite 登陆实例

    首先，`Login.aspx`是一个ASP.NET页面，它通常作为登录界面的前端展示。在这个文件中，EXTJS的组件可能被用来创建登录表单，包括用户名和密码输入框、登录按钮等。EXTJS允许开发者通过声明式方式定义组件，创建出...

Magicbox
Global site tag (gtag.js) - Google Analytics