4.2 实验指导4-1：将文件上传到服务器端

虽然前面的练习已经获取到选择文件的基本信息，也能够限制图片的类型，但是，最重要的一步是将这些文件上传到服务器端指定的目录中，这样，删除本地的文件时，并不会影响到服务器端目录中的文件。

将选择的文件上传到服务器端时需要借助其他知识实现上传的功能，本节实验指导结合ASP.NET实现文件上传的功能，实现步骤如下。

（1）打开VS 2010或更高级的版本工具，创建Index.aspx页面，该页面提供用户选择文件。代码如下。

    <form id="form1" action="Success.aspx" enctype="multipart/form-data" method="post" >
        <h2><img src="imgs/bullet1.gif" />文件上传</h2>
    选择一个或者多个文件
        <input type="file" id="bookfile" multiple="true" name="bookfiles" />
        <input type="button" value="预览" onclick="getFilesInfo()" />
        <input type="submit" value="上传" />
    </form>

（2）单击上个步骤中所添加的名称是“预览”的按钮时触发Click事件调用JavaScript中的getFilesInfo()函数，该函数中的代码遍历用户选择的多个文件，最后显示一共上传的文件数量。代码如下。

    function getFilesInfo() {
        var result = document.getElementById("tFiles");
        var filelists = document.getElementById("bookfile");
        for (var i = 0; i < filelists.files.length; i++) {
            var aFile = filelists.files[i];
            var str = "<tr><td>" + aFile.name + "</td><td>" + aFile.size + "字节</td><td>" + aFile.type + "</td> </tr>";
            result.innerHTML += str;
        }
        result.innerHTML += "<tr><td colspan='3'>本次一共上传" +
            document.getElementById("bookfile").files.length + "个文件。</td></tr>";
    }

（3）运行页面选择文件后单击【浏览】按钮查看效果，如图4-11所示。

图4-11 单击【浏览】按钮查看效果

（4）单击【上传】按钮时会链接到Success.aspx页面，在该页面接收用户所选择的文件并进行处理，将处理后的结果返回。如果不存在Success.aspx页面进行添加，添加完成后向页面的合适位置添加显示结果的span元素，并为该元素添加runat属性转换为控件。代码如下。

    <h3>上传结果：<span id="msginfo" runat="server"></span></h3>

（5）为Success.aspx页面后台的Load事件添加代码，在这些代码中首先获取上传的文件的数量。如果数量不为0时则遍历上传的文件，并且创建HttpPostedFile对象，如果该对象所获取的ContentLength属性的长度大于0，并且该对象不为空，那么调用SaveAs()方法将文件上传到当前项目的upload目录下，最后将结果返回。Load事件代码如下。

    private string messageInfo = "上传成功！";//返回信息
    protected void Page_Load(object sender, EventArgs e)
    {
        int iTotal = Request.Files.Count;
        if (iTotal == 0)
        {
            messageInfo = "没有数据";
        }
        else
        {
            for (int i = 0; i < iTotal; i++)
            {
                HttpPostedFile file = Request.Files[i];
                if (file.ContentLength > 0 || !string.IsNullOrEmpty(file.FileName))
                {
                    file.SaveAs(System.Web.HttpContext.Current.Server.MapPath ("upload/"+ Path.GetFileName(file.FileName)));//保存文件
                }
            }
            messageInfo += "一共上传" + iTotal + "个文件。";
        }
        msginfo.InnerText = messageInfo;
    }

（6）继续操作页面，选择文件后单击【上传】按钮上传文件，上传成功时的效果如图4-12所示。

图4-12 上传文件到服务器端成功时的效果

上一章目录下一章