Asp.net的FileUpload控件的文件上传与Extjs文件上传的简单Demo

最新推荐文章于 2026-03-20 11:53:28 发布

转载最新推荐文章于 2026-03-20 11:53:28 发布 · 1k 阅读

标签

#extjs #asp.net #stylesheet #upload #function

本文介绍使用ASP.NET FileUpload控件及ExtJS进行文件上传的方法，包括代码示例和运行环境说明。

Asp.net的FileUpload控件的文件上传与Extjs文件上传的简单Demo

点击:44次　来源：　时间：2011-08-16 20:42

当我在说“愿上帝保佑女人”这句话时，尽管我们之中没有人能完全懂得一位贤妻的高贵情怀，或是一位良母执着奉献，但贰心中会说“阿门”！一、可能思路

精力象乳汁一样是可以养育的，聪明便是一只乳房。1.1、Asp.net的FileUpload控件的文件上传

1.2、Extjs的文件上传

二、数据库（暂无）

三、新建一个网站

3.1、Default.aspx代码

<％＠ Page Language="C＃" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" ％>

<!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 runat="server">
<title></title>
   <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>

    <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>

    <script src="ext-3.2.0/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <link href="UploadFile/fileuploadfield.css" rel="stylesheet" type="text/css" />
    <script src="UploadFile/FileUpLoadField.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.QuickTips.init（）;
        Ext.form.Field.prototype.msgTarget = ""side"";
        Ext.onReady（function（） {
            var form = new Ext.form.FormPanel（{
                baseCls: ""x-plain""，
                labelWidth: 80，
                url: ""upload.ashx""，
                fileUpload: true，
                defaultType: ""textfield""，

                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  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" /><br />
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </form>
</body>
</html>

3.2、Default.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 _Default : System.Web.UI.Page
{
    protected void Page_Load（object sender， EventArgs e）
    {
        if （!IsPostBack）
        {
        }
    }
    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的文件夹";
        }
    }
}

3.3、upload.ashx代码

<％＠ WebHandler Language="C＃" Class="upload" ％>

using System;
using System.Web;

using System.IO;
public class upload : IHttpHandler
{

    public void ProcessRequest（HttpContext context）
    {
        context.Response.ContentType = "text/html";
        UpLoadImage（context）;
    }
    string serverpath = "";
    string savepath = "";
    private string json = "";
    public void UpLoadImage（HttpContext content）
    {
        try
        {
            if （content.Request.Files.Count > 0）
            {
                HttpPostedFile postedFile = content.Request.Files[0];
                serverpath = content.Server.MapPath（"~/"）;
                savepath = serverpath + Path.GetFileName（postedFile.FileName）;
                if （File.Exists（savepath））
                {
                    json = "{success:false，""msg"":""该图片已经存在！""}";
                }
                else
                {
                    postedFile.SaveAs（savepath）;
                    json = "{success:true，""msg"":""上传成功！""}";
                }
            }
            else
            {
                json = "{success:false，""msg"":""获取文件异常！""}";
            }
        }
        catch （Exception ex）
        {
            json = "{success:false，""msg"":""" + ex.Message + "！""}";
        }
        content.Response.Write（json）;
        content.Response.End（）;
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

四、结果演示