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

来源：互联网发布：制作音乐广告录音软件编辑：程序博客网时间：2024/05/21 00:17

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

效果预览如下：