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

http://blog.csdn.net/lmaohuanl/article/details/6792057

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <!--ExtJs4.0官方下载ExtJs样式文件-->
  6. <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  7. <!--ExtJs4.0官方下载ExtJs文件-->
  8. <script src="extjs/ext-all.js" type="text/javascript"></script>
  9. <script language="javascript" type="text/javascript">
  10. function login_click(b) {
  11. //1.拿到表单面板
  12. var loginFormPanel=Ext.getCmp("loginFormPanel");
  13. //2.通过面板对象拿到它里面的表单
  14. var form = loginFormPanel.getForm();
  15. //3.在提交前,判断表单输入是否有误
  16. if (!form.isValid()) {
  17. return;
  18. }
  19. //4.调用提交的方法,提交该表单
  20. form.submit({
  21. waitMsg:"正在向服务器提交数据",
  22. url:"Extjs1.aspx",
  23. success: function (f, a) {
  24. Ext.MessageBox.alert("提示", "你的详细信息如下:<br/>用户名:" + a.result.name + "<br/>密 码:" + a.result.password + "<br/>你上传的图片数量为:"
  25. + a.result.filecount);
  26. },
  27. failure: function (f,a) {
  28. Ext.MessageBox.alert("提示", a.result.msg);
  29. }
  30. });
  31. }
  32. Ext.onReady(function () {
  33. var txtUserName = new Ext.form.field.Text({
  34. fieldLabel: "用户名",
  35. labelWidth: 50,
  36. margin: "10 0 5 0",
  37. allowBlank: false,
  38. blankText: "用户名不能为空",
  39. name: "txtUserName"
  40. });
  41. var txtUserPassword = new Ext.form.field.Text({
  42. fieldLabel: "密 码",
  43. labelWidth: 50,
  44. margin: "5 0 5 0",
  45. inputType: "password",
  46. allowBlank: false,
  47. blankText: "密码不能为空",
  48. name: "txtUserPassword"
  49. });
  50. var file = new Ext.form.field.File({
  51. fieldLabel:"请选择一张图片",
  52. buttonText:"浏览",
  53. regex:/^.+\.(jpg|png|gif)$/,
  54. regexText:"你只能选择jpg,png,gif格式的图片"
  55. });
  56. var win = new Ext.window.Window({
  57. title: "提交数据——登录",
  58. height: 200,
  59. width: 350,
  60. layout: "fit",
  61. items: [
  62. { xtype: "form", frame: true, layout: { type: "vbox", align: "center" },
    1. items: [txtUserName, txtUserPassword, file], buttons: [{ text: "登录",
    2. handler: login_click}], id: "loginFormPanel" }
    3. ]
    4. });
    5. win.show();
    6. });
    7. </script>
    8. </head>
    9. <body>
    10. </body>
    11. </html>
      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. public partial class Extjs1 : System.Web.UI.Page
      8. {
      9. protected void Page_Load(object sender, EventArgs e)
      10. {
      11. System.Threading.Thread.Sleep(3000);
      12. string name = Request.Form["txtUserName"];
      13. string password = Request.Form["txtUserPassword"];
      14. //.............................
      15. int pointIndex=Request.Files[0].FileName.LastIndexOf(".");
      16. string lastName=Request.Files[0].FileName.Substring(pointIndex);
      17. string fileName = new Random().Next(10000).ToString();
      18. string path = Server.MapPath("") + "/" + fileName + lastName;
      19. Request.Files[0].SaveAs(path);
      20. Response.Write("{success:true,msg:‘成功‘,name:‘"+name+"‘,password:‘"+password+"‘,filecount:‘"+Request.Files.Count+"‘}");
      21. Response.End();
      22. }
      23. }
时间: 2024-10-05 20:43:25

转: ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器的相关文章

客户端表单提交数据方式与服务器获取数据

表单提交数据的两种方式 表单form的提交有两种方式,一种是get的方法,通过超级链接后面的参数提交过来,一种是post ,通过Form表单提交过来. post方式: <form id="form1" name="form1" method="post" action="login.aspx"> <table width="501" border="0" align=&

Asp.net Mvc post表单提交多个实体模型

上一遍说道用Tuple实现Asp.net Mvc action返回多个模型实体给view,此篇发过来,实现view表单提交多个实体模型到action. 1.view代码: @{ Layout = null; } @model Tuple<Model.UserInfo, Model.UserSlave> <!DOCTYPE html> <html> <head> <title></title> <meta name='viewpo

表单提交时上传图片 表单ajax提交

页面 <script type="text/javascript" src="js/jquery.form.js"></script><script language="javascript">$(function() { //提交表单        $("#add").click(function() {            if($('#addForm').form('validate

关于表单提交submit的兼容性问题。

这里的form 表单 点击下载执行的函数名字是submit,这样不规范,submit是提交表单,函数名字不能取名叫submit,如果取名叫submit会在低版本的浏览器上无法识别,导致直接提交表单,无法执行函数,例如IE7,IE8.

java模拟from表单提交,上传图片

/** * java上传表单,有图片 * @param urlStr 上传地址 * @param textMap 表单参数 * @param fileMap 文件参数 key:文件名称 value:文件地址 * @return */ @SuppressWarnings("rawtypes") public static String formUpload(String urlStr, Map<String, String> textMap, Map<String, S

带文件的表单提交

今天用表单提交一个文件到服务器,但服务器始终接收不到上传的文件.最后排除出原因有二: 1 表单需要封装. <form>标签要加上 enctype="multipart/form-data"属性 2 文件选择控件一定要有name和id属性 <form method="post" action="http://www.baidu.com" enctype="multipart/form-data"> <

ASP.NET MVC 表单提交多层子级实体集合数据到控制器中

于遇到了项目中实体类嵌套多层子级实体集合,并且子级实体集合的数据需要提交保存到数据库中的问题.针对此情况需要进行一些特殊的处理才可以将整个 实体类及子级实体集合数据提交表单到控制器中,解决的方法是根据MVC视图中表单的命名规则来设置正确的子级实体集合所属的表单控件name属性,从而来 获取提交的集合数据. 在说明如何将表单中实体的子级实体集合数据提交到控制器中的问题前,我们需要了解MVC的对于数组和列表集合的表单提交方式(点击此链接进行查看). 定义多层嵌套实体和假设场景 首先我们根据情况进行分

Swift3.0服务端开发(二) 静态文件添加、路由配置以及表单提交

今天博客中就来聊一下Perfect框架的静态文件的添加与访问,路由的配置以及表单的提交.虽然官网上有聊静态文件的访问的部分,但是在使用Perfect框架来访问静态文件时还是有些点需要注意的,这些关键点在其官方文档上并未提出.今天我们要做的事情就是通过浏览器访问静态文件,然后在静态文件中使用form表单往指定的路由上进行提交相应的数据. 一.静态文件的添加与访问 1.未使用Xcode管理的Perfect的静态文件根目录的配置 在PHP开发或者Java Web开发中,都有一个根目录来存储相应的静态文

ASP.NET Razor简单的表单提交处理的代码

如下内容段是关于ASP.NET Razor简单的表单提交处理的内容. <!DOCTYPE html><html> <body> br/>@{if (IsPost){ string companyname = Request["CompanyName"]; string contactname = Request["ContactName"]; <p>You entered: <br> Company