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

最新推荐文章于 2021-08-11 09:48:34 发布

LMAOhuaNL

最新推荐文章于 2021-08-11 09:48:34 发布

阅读量8.3k

点赞数

分类专栏： asp.Net Ext Js 文章标签： extjs asp.net string function stylesheet xhtml

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6792057

版权

asp.Net 同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

Ext Js

20 篇文章 0 订阅

订阅专栏

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

效果预览如下：

LMAOhuaNL

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器

function login_click(b) { //1.拿到表单面板 var loginFormPanel=Ext.getCmp("loginFormPanel"); //2.通过面板对象拿到它里面
复制链接

扫一扫

专栏目录