FileUpload控件的用法

最新推荐文章于 2021-07-02 04:09:59 发布

yingjiell

最新推荐文章于 2021-07-02 04:09:59 发布

阅读量3.3w

点赞数 4

文章标签： server javascript html 服务器 string xhtml

FileUpload控件是一个很重要的控件，它被Web服务器最终解释为形如“<input type=”file”…/>”这样的普通HTML控件。
它有如下常见属性：

属性名数据类型说明
FileBytes byte[] 上传的文件内容的字节数组表示形式
FileContent Stream 上传文件的数据流
FileName string 上传文件在客户端的名字
HasFile bool 指示是否上传了文件
PostedFile HttpPostedFile 获取文件基础的HttpPostedFile对象

这个HttpPostedFile对象能帮我们做很多工作，它也有一些有用的常见属性：

属性名数据类型说明
ContentLength int 上传的文件内容的字节长度
ContentType string 上传文件的MIME 内容类型
FileName string 上传文件的在客户端的名字
InputStream Stream 指向上传文件的Stream对象

FileUpload控件还有一个void SaveAs (string filename)的方法，这个方法用于将上传的文件保存到服务器上。一般来说，使用FileUpload控件上传文件一般有如下几个步骤：
（1）利用HasFile属性判断是否上传了文件。
（2）在服务器上指定一个物理路径，并检查这个物理路径是否存在，如果不存在则先创建。
（3）指定上传文件在服务器上的上传路径，利用SaveAs()保存上传的文件。这一步还可以做一些其它检查工作，比如检查上传的文件格式是否符合要求或文件内容大小是否符合要求。
（4）将相对路径或者URL地址保存起来，以便客户访问或者下载。
这里要着重强调的是：我们保存上传的时候保存文件用的是物理路径，但是要保存的、日后客户端能访问得到的却是相对路径或者URL地址。
下面是一个简单的例子，这个页面叫Upload.aspx，它的源视图代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upload.aspx.cs" Inherits="Upload" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="fileUpload" runat="server" />
        <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="上传" />
        <asp:Literal ID="literal" runat="server"></asp:Literal></div>
    </form>
</body>
</html>
后台cs代码如下：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Upload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        //判断是否上传了文件
        if (fileUpload.HasFile)
        {
            //指定上传文件在服务器上的保存路径
            string savePath = Server.MapPath("~/upload/");
            //检查服务器上是否存在这个物理路径，如果不存在则创建
            if (!System.IO.Directory.Exists(savePath))
            {
                //需要注意的是，需要对这个物理路径有足够的权限，否则会报错
                //另外，这个路径应该是在网站之下，而将网站部署在C盘却把上传文件保存在D盘
                System.IO.Directory.CreateDirectory(savePath);
            }
            savePath = savePath + "//" + fileUpload.FileName;
            fileUpload.SaveAs(savePath);//保存文件
            //不过需要注意的是，在客户端访问却需要指定的是URL地址，而不是在服务器上的物理地址
            literal.Text = string.Format("<a href='upload/{0}'>upload/{0}</a>", fileUpload.FileName);
        }
    }
}
以下是程序运行结果：

上传文件之后的效果：

因为我上传了一个proc.txt的文件，所以最后的URL地址是：upload/proc.txt，点击这个超级链接能打开刚刚上传的文件查看其内容，如下图：

注意：对于有些文件，如rar格式的，点击之后则会出现下载提示而不是直接在浏览器打开。

带图片预览功能的FileUpload控件
通过上面的讲述，我们知道一些web服务器控件在vs2005下没有javascript客户端事件的提示，不过只要我们确信这个事件对应的HTML控件确实有，我们可以自行添加的，下面我们就来做一个让FileUpload控件带有图片预览功能的例子。
因为这里不涉及到上传后如何保存，只是仅仅在用户选择了要上传的文件时或者用户将鼠标移动到上传控件上时，如果上传的文件是图片文件，我们就显示这个图片的预览效果5分钟，然后消失。以下是程序代码（前台代码，保存代码和上面的例子一样，所以没有写后台cs代码）：

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>上传图片预览实例</title>
    <script type="text/javascript" language="javascript">
//如果用户选择了图片，则显示图片的预览效果
function previewImage()
{
var x = document.getElementById("file");
if(!x || !x.value)//如果没有选择上传文件
{
     return;
   }
    var patn = //.jpg$|/.jpeg$|/.gif$/i;
    if(patn.test(x.value))//如果上传文件的后缀是.jpg或.jpeg或.gif
    {
        var y = document.getElementById("img");
        if(y)
        {
            y.src = 'file://localhost/' + x.value;
            y.style.display="block";
        }
        else
        {
            var img=document.createElement('img');
            img.setAttribute('src','file://localhost/'+x.value);
            img.setAttribute('width','120');
            img.setAttribute('height','90');
            img.setAttribute('id','img');
            document.getElementById('form1').appendChild(img);
        }
        setTimeout("hidden()",5000); //5秒之后执行隐藏图片的javascript方法
    }
    else
    {
        alert("您选择的似乎不是图像文件。");
    }
}
//隐藏照片
function hidden()
{
    var y = document.getElementById("img");
    if(y)
    {
        document.getElementById('img').style.display="none";
    }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:FileUpload ID="file" runat="server" οnchange="previewImage()" οnmοuseοver="previewImage()" />
        <asp:Button ID="btnUpload" runat="server" Text="上传" /></div>
    </form>
</body>
</html>
说明一下，在这个页面里form表单的id是form1,上传控件的id是file，所以在客户端用到了document.getElementById()这个方法来获取相关的控件的属性值，并且通过javascript脚本动态添加了一个<img id=”img”>的控件，然后我们操纵它的src属性来决定显示哪张图片，利用它的style.display属性来决定是否显示。
以下预览时的效果：

预览5秒钟之后，不再带有预览功能的效果：

注意：如果我们要上传文件，需要给表单增加enctype="multipart/form-data"属性，如果我们使用了FileUpload控件时，生成HTML代码时表单会自动加上这个属性。

yingjiell

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
FileUpload控件的用法

<br />FileUpload控件是一个很重要的控件，它被Web服务器最终解释为形如“<input type=”file”…/>”这样的普通HTML控件。<br />它有如下常见属性：<br /> <br />属性名数据类型说明 <br />FileBytes byte[] 上传的文件内容的字节数组表示形式 <br />FileContent Stream 上传文件的数据流 <br />FileName string 上传文件在客户端的名字 <br />HasFile bool 指示是否上传了文件 <
复制链接

扫一扫