惠普捕鱼机破解器在哪一家

書名： HTML+CSS網頁設計實踐教程
作者名：田中雨
本章字數： 782字
更新時間： 2021-03-19 20:43:07

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 上傳文件到服務器端成功時的效果

官术网_书友最值得收藏!

HTML+CSS網頁設計實踐教程

4.2 實驗指導4-1：將文件上傳到服務器端