文件上传(图片)

最新推荐文章于 2020-08-28 10:35:58 发布

浪仙

最新推荐文章于 2020-08-28 10:35:58 发布

阅读量547

点赞数 1

CC 4.0 BY-SA版权

分类专栏：综合文章标签： stylesheet function button upload server asp

本文链接：https://blog.youkuaiyun.com/love33jing2012/article/details/7254696

综合专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用ExtJS框架创建文件上传表单，并通过ASP.NET处理文件上传过程。前端部分详细展示了ExtJS表单配置及文件上传组件的设置；后端部分则实现了文件上传验证与保存逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面：

                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'File Name',
                    name: 'userfile',
                    inputType: 'file',
                    allowBlank: false,
                    blankText: 'File can\'t not empty.',
                    anchor: '90%' // anchor width by percentage
}]
                });

                var win = new Ext.Window({
                    title: 'Upload file',
                    width: 400,
                    height: 200,
                    minWidth: 300,
                    minHeight: 100,
                    layout: 'fit',
                    plain: true,
                    bodyStyle: 'padding:5px;',
                    buttonAlign: 'center',
                    items: form,

                    buttons: [{
                        text: 'Upload',
                        handler: function() {
                            if (form.form.isValid()) {
                                Ext.MessageBox.show({
                                    title: 'Please wait',
                                    msg: 'Uploading...',
                                    progressText: '',
                                    width: 300,
                                    progress: true,
                                    closable: false,
                                    animEl: 'loding'
                                });
                                form.getForm().submit({
                                    success: function(form, action) {
                                        Ext.Msg.alert('Message from extjs.org.cn', action.result.msg);
                                        win.hide();
                                    },
                                    failure: function() {
                                        Ext.Msg.alert('Error', 'File upload failure.');
                                    }
                                })
                            }
                        }
                    }, {
                        text: 'Close',
                        handler: function() { win.hide(); }
}]
                    });
                    win.show();
                });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server"
            Text="上传" onclick="Button1_Click" />
    </div>
    <asp:Image ID="Image1" runat="server" Width="200" Height="150" /><br />
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </form>
</body>
</html>

后台：

protected void Button1_Click(object sender, EventArgs e)
    {
        /** 文件是否为空 **/
        bool fileIsValid = false;

        if (FileUpload1.HasFile)
        {
            /** 获取上传文件的后缀 **/
            string fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
            string[] restrictExtension = { ".gif", ".jpg", ".bmp", ".png" };
            /** 判断文件类型是否符合要求 **/
            for (int i = 0; i < restrictExtension.Length; i++)
            {
                if (fileExtension == restrictExtension[i])
                {
                    fileIsValid = true;
                }
            }
        }
        /** 如果文件类型符合要求，调用SaveAs方法实现上传，并显示相关信息 **/
        if (fileIsValid == true)
        {
                try
                {
                    Image1.ImageUrl = "~/" + FileUpload1.FileName;
                    FileUpload1.SaveAs(Server.MapPath("~/") + FileUpload1.FileName);
                    Label1.Text="文件上传成功";
                    Label1.Text+="<br />";
                    Label1.Text+="<li>"+"原文件路径："+FileUpload1.PostedFile.FileName;
                    Label1.Text+="<br />";
                    Label1.Text+="<li>"+"文件大小："+FileUpload1.PostedFile.ContentLength+"字节";
                    Label1.Text+="<br />";
                    Label1.Text+="<li>"+"文件类型："+FileUpload1.PostedFile.ContentType;
                }
                catch
                {
                    Label1.Text="文件上传成功";
                }
        }
        else
        {
            Label1.Text="只能够上传后缀为.gif,.jpg,.bmp,.png的文件夹";
        }
    }