改变FileUpload文件上传控件的显示方式,确认后上传

一、Aspx页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadDemo.aspx.cs" Inherits="WebApplication1.FileUploadDemo" %>

<!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 id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .ddtop{ width:98%; height:30px; margin-top:5px; border:#EED97C 1px solid; margin-left:auto; margin-right:auto; margin-bottom:5px; background:#FFFCEB; font:"宋体"; font-size:14px;  padding-left:10px; padding-top:10px;}
        input{border-left:1px solid #333;border-top:1px solid #333;border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
        .button{ cursor:pointer; background-color:#1481E6;border:1px solid #fff;text-align:center;color:#fff;line-height:19px;}
        .heigth_22{ height:22px;}
        .width_70{ width:70px;}
    </style>
    <script type="text/javascript">
        function setUpFileText(obj) {
            var fileName = getFullPath(obj);
            document.getElementById("upFileText").value = fileName;
        }

        function getFullPath(obj) {
            if (obj) {
                // IE
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();
                    return document.selection.createRange().text;
                }
                // Firefox
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (obj.files) {
                        return obj.files.item(0).name;
                    }
                }
                // Chrome
                else if (window.navigator.userAgent.indexOf("Chrome") >= 1) {
                    if (obj.files) {
                        return obj.files[0].name;
                    }
                }
                return obj.value;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="ddtop">
        <div>
        <span><input type="text" id="upFileText" name="upFileText" readonly="readonly" /></span>
        <span style="position: absolute; z-index: 2; cursor: pointer;">
            <asp:FileUpload ID="fileUpload" runat="server" CssClass="width_70 heigth_22" Style="filter: alpha(opacity=0); opacity: 0; cursor: pointer;" onchange="setUpFileText(this)" accept="image/*" />
            <asp:Button ID="btnOk" runat="server" Text="确定" CssClass="button width_70 heigth_22" OnClick="btnOk_Click" />
        </span>
        <span style="position: absolute; z-index: 1; cursor: pointer; height: 25px;">
            <input type="button" name="btnUploadFile" id="btnUploadFile" value="上傳檔案" class="button width_70 heigth_22" />
        </span>
        </div>
    </div>
    </form>
</body>
</html>

二、Aspx后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace WebApplication1
{
    public partial class FileUploadDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnOk_Click(object sender, EventArgs e)
        {
            if (this.fileUpload.HasFile)
            {
                string fileName = this.fileUpload.PostedFile.FileName;                  // 客户端文件路径
                string extension = System.IO.Path.GetExtension(fileName);
                if (extension.ToLower() != ".jpg" && extension.ToLower() != ".png")
                {
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "msg", "alert(‘只允许jpg 和 png!‘);", true);
                    return;
                }

                string pathBase = "D:\\UploadFile";
                if (!Directory.Exists(pathBase))
                    Directory.CreateDirectory(pathBase);
                string webFilePath = Path.Combine(pathBase, fileName); // 数据库保存文件路径(相对全路径)
                this.fileUpload.SaveAs(webFilePath);  // 使用 SaveAs 方法保存文件
                ScriptManager.RegisterStartupScript(this, this.GetType(), "msg", "alert(‘上傳成功,我們會盡快進行核對!‘);", true);
            }
        }
    }
}

改变FileUpload文件上传控件的显示方式,确认后上传

时间: 2024-08-02 02:47:28

改变FileUpload文件上传控件的显示方式,确认后上传的相关文章

改变FileUpload文件上传控件的显示方式,选择文件后自动上传

一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadDemo.aspx.cs" Inherits="WebApplication1.FileUploadDemo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

.Net 使用文件上传控件FileUpload上传图片

例1: 来源:http://long546324.iteye.com/blog/349946 Default.aspx文档: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

文件上传控件FileUpload用法初步

1 <asp:FileUpload ID="fudTest" runat="server" /> 2 <asp:Button ID="btnUpload" runat="server" Text="上传" OnClick="btnUpload_Click" /> 3 <br /> 4 <asp:Label ID="lblMessage&

ASP.NET使用文件上传控件上传图片

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/xht

jquery文件上传控件 Uploadify

(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图

给上传文件的input控件&quot;美容&quot;

作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工作中也遇到了这个问题.解决以后想着人生在于总结.于是乎就把这个简单的demo记录下来. html代码 <form action=""method="post"enctype="multipart/form-data"> <a hre

因用了NeatUpload大文件上传控件而导致Nonfile portion &gt; 4194304 bytes错误的解决方法

今天遇到一个问题,就是"NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误",百度后发现了一个解决方法,跟大家分享下: NeatUpload是一个开源的大文件上传控件,非常的强大,支持文件类型过滤.上传进度条显示.多文件上传等强大的功能. 但部署至项目后,有些地方用普通的FileUpload上传时却发生了一个错误(Nonfile portion > 4194304 bytes,文件大于默认值4M),因如果用NeatUp

FileUpload上传控件用法详解 (转载)

FileUpload 类显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\TestFile.txt )来指定要上载的文件.用户也可以通过单击“浏览” 按钮,然后在“选择文件” 对话框中定位文件来选择文件. 注意: FileUpload 控件设计为仅用于部分页面呈现期间的回发情况,并不用于异步回发情况.在 UpdatePanel 控件内部使用 FileUpload 控件时,

给上传文件的input控件“美容”

在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮. demo: html代码 1 <body> 2 <form action="" method="post" enctype="multipart/form-data"> 3 <a href="#" class="a-uploa