談ASP.NET多附件上傳和附件編輯的實(shí)現(xiàn)_.Net教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

推薦：小議程序員的信仰
老婆經(jīng)�？湮矣邢敕ǎ靡嬗诶掀糯笕说墓膭�(lì)，我才打算將自己平時(shí)所想，所總結(jié)的東西寫下來。人是需要不斷總結(jié)的，有總結(jié)才會(huì)有進(jìn)步。所謂總結(jié)，并不一定是多么高深的道理，多么復(fù)雜的推論，也并不一定要長(zhǎng)篇大論。有時(shí)，一句話，或是一個(gè)瞬間，會(huì)讓你明白很

在寫這篇文章之前我也在Google上找到了很多有關(guān)多附件上傳的文章，有用ASP.NET實(shí)現(xiàn)的，也有用JSP、PHP等其它技術(shù)實(shí)現(xiàn)的，但基本前提都是事先通過js腳本來動(dòng)態(tài)創(chuàng)建DOM，然后上傳的時(shí)候在服務(wù)端做一下處理，有點(diǎn)類似于163的郵件系統(tǒng)。文件上傳需要通過頁(yè)面的POST方法進(jìn)行提交，這個(gè)我在一次MOSS開發(fā)中iFrame表單提交的古怪問題解決一問中已經(jīng)闡述過，其中包括了如何使用頁(yè)面隱藏的iFrame來提交表單從而避免整個(gè)頁(yè)面提交到服務(wù)器而導(dǎo)致頁(yè)面的刷新。多附件上傳的原理與之類似，只不過需要事先通過腳本在頁(yè)面上動(dòng)態(tài)創(chuàng)建多個(gè)input type='file'的標(biāo)簽，當(dāng)然，如果要想功能更加完美，你可能還需要通過腳本動(dòng)態(tài)添加一些按鈕事件以讓用戶可以刪除他所添加的文件。下面是一個(gè)應(yīng)用效果的截圖。

其中紅色方框內(nèi)的內(nèi)容是通過腳本在頁(yè)面上動(dòng)態(tài)創(chuàng)建的，將用戶在客戶端所選文件的文件名動(dòng)態(tài)添加到一個(gè)div里，同時(shí)在這個(gè)div中放一個(gè)隱藏的input type=’file’的標(biāo)簽，它的value為用戶所選文件的路徑，然后在div中放置一個(gè)img，添加onmouseover和onmouseout事件為圖片增加了一些鼠標(biāo)滑動(dòng)時(shí)的效果，onclick事件用來響應(yīng)用戶點(diǎn)擊img時(shí)刪除對(duì)應(yīng)的文件�？匆幌麓a中的具體實(shí)現(xiàn)。

以下為引用的內(nèi)容：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._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>
    <script src="MultiAffix.js" type="text/javascript"></script>
    <script type="text/javascript">
        var controlName = 1; // This variable is for the dynamic file controls's name.

        function addImg(targetElement, savestatsElement, oldimgElement) {
            var browseimgElement = $get("browseimg");
            var arr = browseimgElement.getElementsByTagName('input');
            if (arr.length == 0 || arr[0].value.length == 0) {

                alert('No file inputs.');
                return;
            }
            var oldbrowser = arr[0];
            var filename = getfilename(oldbrowser.value);
            if (!validateimgtype(oldbrowser.value)) return;
            if (!validateimgcount(targetElement, 3)) return;
            var imgtitles = savestatsElement.value + oldimgElement.value;
            if (validateimgexist(filename, imgtitles)) { alert('You have already added this image!'); return; }
            if (oldbrowser != undefined) {
                var newbrowser = oldbrowser.cloneNode(true);
                newbrowser.value = '';
                var newfile = document.createElement('div');
                newfile.innerHTML = filename + '  ';

                // Create a button element for delete the image.
                var newfileimgbutton = document.createElement('img');
                newfileimgbutton.src = 'ShoutOut_Close.gif';
                newfileimgbutton.alt = 'Delete';
                newfileimgbutton.onclick = function() {
                    this.parentNode.parentNode.removeChild(this.parentNode);
                    savestatsElement.value = updatehiddenimgs(filename, savestatsElement.value);
                }
                newfileimgbutton.onmouseover = function() {
                    this.src = 'ShoutOut_Close_rollover.gif';
                }
                newfileimgbutton.onmouseout = function() {
                    this.src = 'ShoutOut_Close.gif';
                }

                browseimgElement.replaceChild(newbrowser, oldbrowser);
                oldbrowser.name = ++controlName;
                oldbrowser.style.display = 'none';
                newfile.appendChild(oldbrowser);

                newfile.appendChild(newfileimgbutton);
                targetElement.appendChild(newfile);

                $get("chkAgree").checked = false;
                $get("btAdd").disabled = true;
                savestatsElement.value += filename + '|';
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <div>
            Description:
            <asp:TextBox ID="tbDescription" MaxLength="2000" runat="server" TextMode="MultiLine"></asp:TextBox>
        </div>
        <div>
            Location:
            <asp:DropDownList ID="ddlLocation" runat="server">
            </asp:DropDownList>
        </div>
        <div>
            Display Posted By User:
            <asp:CheckBox ID="chkPostedByUser" Checked="true" runat="server" />
        </div>
        <div>
            Notify Shout out User:
            <asp:CheckBox ID="chkNotifyUser" runat="server" />
        </div>
        <div>
            Notify Shout out to Email:
            <asp:TextBox ID="tbShoutoutToEmail" MaxLength="25" runat="server"></asp:TextBox>
        </div>
        <div>
            Images:
            <div id="saveshoutoutimgs" runat="server">
            </div>
            <input id="btAddImage" type="button" onclick="$get('saveshoutoutaddimgs').style.display='block';this.disabled=true;"
                value="Click here to Add Image" />
        </div>
        <div id="saveshoutoutdetailshowimg">
            <div id="saveshoutoutaddimgs" style="display: none;">
                <div>
                    Add Image:</div>
                <div id="browseimg">
                    <input type="file" />
                </div>
                <div>
                    Size limit of the images is 100kb. Hieght and Width of the images should not exceed
                    200px.</div>
                <div>
                    <input id="chkAgree" type="checkbox" onclick="$get('btAdd').disabled=!this.checked;" />I
                    agree.legal signoff text to be defined.
                </div>
                <div>
                    <input id="btAdd" disabled="disabled" type="button" value="Add" runat="server" />
                </div>
            </div>
        </div>
    </div>
    <asp:TextBox ID="tbImgs" runat="server" Text="|" Style="display: none;"></asp:TextBox>
    <asp:TextBox ID="tbOldImgs" runat="server" Text="|" Style="display: none;"></asp:TextBox>
    </form>
</body>
</html>

以下為引用的內(nèi)容：

protected void Page_Load(object sender, EventArgs e)
{
    string script = string.Format("addImg($get('{0}'), $get('{1}'), $get('{2}'));",
        this.saveshoutoutimgs.ClientID,
        this.tbImgs.ClientID,
        this.tbOldImgs.ClientID);
    this.btAdd.Attributes.Add("onclick", script);
}

代碼建立在Ajax.net基礎(chǔ)之上，環(huán)境是Visual Studio 2008 + Windows 2003，測(cè)試通過！

簡(jiǎn)單做一下說明：

1. <div id="saveshoutoutimg" runat="server"/>用來存放動(dòng)態(tài)添加的文件相關(guān)標(biāo)簽。

2. btAddImage被點(diǎn)擊后自身將被disabled掉，然后顯示saveshoutoutaddimgs整個(gè)div。

3. 在saveshoutoutaddimgs中用戶可以完成文件的選取和確認(rèn)操作，chkAgree用來enable btAdd按鈕。

4. 當(dāng)用戶點(diǎn)擊btAdd時(shí)，觸發(fā)onclick事件，該事件在code-behind的Page_Load方法中注冊(cè)，因?yàn)槟_本中涉及到使用服務(wù)端控件的ClientID屬性，這樣寫比較方便。

5. 客戶端函數(shù)addImg用來完成動(dòng)態(tài)DOM的添加操作，它接收三個(gè)參數(shù)，第一個(gè)參數(shù)targetElement表示存放動(dòng)態(tài)DOM的宿主DIV，第二個(gè)參數(shù)savestatsElement表示用于保存已添加文件信息的隱藏文本框，第三個(gè)參數(shù)oldimgElement表示用于保存在編輯狀態(tài)下用戶上一次上傳的文件信息隱藏文本框。基本思路是復(fù)制browseimg下的input type="file"標(biāo)簽，然后將動(dòng)態(tài)生成的DOM添加到saveshoutoutimgs下，并同時(shí)附加了一些事件。

6. tbImgs隱藏文本框用來保存用戶已選文件的信息，以"|文件名1|文件名2|文件名3|..."的格式存放；tbOldImgs隱藏文本框中的值在編輯狀態(tài)下才會(huì)得到，其中保存了用戶上一次所上傳文件的信息，存儲(chǔ)格式與tbImgs相同。

7. 在編輯狀態(tài)下，在服務(wù)端向saveshoutoutimgs標(biāo)簽添加與addImg腳本函數(shù)所生成的動(dòng)態(tài)DOM相同的標(biāo)簽，并同時(shí)往tbOldImgs隱藏文本框中寫入文件信息。我在這里寫了一個(gè)示例，讀者可以自己完善代碼用以驗(yàn)證。在顯示文件時(shí)我在文件的名稱上添加了一個(gè)鏈接，這個(gè)鏈接所指向的頁(yè)面用于輸出圖片，如通過得到的圖片ID在數(shù)據(jù)庫(kù)中檢索圖片的二進(jìn)制數(shù)據(jù)然后Write到頁(yè)面上。ImageEntity為自定義Image對(duì)象的實(shí)體類，用以存儲(chǔ)圖片文件的相關(guān)信息。

以下為引用的內(nèi)容：

public void SetImages(List<ImageEntity> images)
{
    if (images.Count > 0)
    {
        this.tbOldImgs.Text = "|";
        foreach (ImageEntity image in images)
        {
            HtmlGenericControl imgDiv = new HtmlGenericControl("Div");

            HtmlAnchor imgAnchor = new HtmlAnchor();
            imgAnchor.HRef = string.Format("Thumbnail.aspx?isthumbnail=false&basecommentid={0}&imagetitle={1}",
                image.ID.ToString(), image.Title);
            imgAnchor.Target = "_blank";
            imgAnchor.Title = image.Title;
            imgAnchor.InnerHtml = image.Title + "  ";

            HtmlImage imgButton = new HtmlImage();
            imgButton.Src = "ShoutOut_Close.gif";
            imgButton.Alt = "Delete";
            imgButton.Attributes["onclick"] = string.Format("this.parentNode.parentNode.removeChild(this.parentNode);$get('{0}').value = updatehiddenimgs('{1}',$get('{0}').value);",
                this.tbOldImgs.ClientID, image.Title);
            imgButton.Attributes["onmouseover"] = "this.src='ShoutOut_Close_rollover.gif'";
            imgButton.Attributes["onmouseout"] = "this.src='ShoutOut_Close.gif'";

            imgDiv.Controls.Add(imgAnchor);
            imgDiv.Controls.Add(imgButton);
            this.saveshoutoutimgs.Controls.Add(imgDiv);
            this.tbOldImgs.Text += image.Title + "|";
        }
    }
}

public class ImageEntity
{
    public ImageEntity()
    {
    }

    public ImageEntity(int id, string title, Byte[] imageBlob, string type)
    {
        ID = id;
        Title = title;
        ImageBlob = imageBlob;
        Type = type;
    }

    public int ID { get; set; }
    public string Title { get; set; }
    public string Type { get; set; }
    public Byte[] ImageBlob { get; set; }
}

有一個(gè)問題需要注意，當(dāng)保存編輯狀態(tài)下的數(shù)據(jù)時(shí)，在服務(wù)端需要重新刪除原有圖片然后再重新添加圖片，對(duì)于用戶未在客戶端修改的圖片，則需要在保存數(shù)據(jù)前通過tbOldImgs隱藏域中的相關(guān)信息重新檢索得到圖片數(shù)據(jù)，然后重新保存圖片。例如編輯狀態(tài)下得到A、B、C三張圖片，用戶刪除了圖片C，添加了圖片D，則保存時(shí)在服務(wù)端這樣操作：先通過tbOldImgs隱藏域得到剩余的舊圖片信息(即圖片A和圖片B)，從數(shù)據(jù)庫(kù)中檢索出這些圖片的數(shù)據(jù)，保存前先刪除與該條數(shù)據(jù)相關(guān)的所有已上傳圖片，然后與得到的新圖片(即圖片D)一并存入數(shù)據(jù)庫(kù)中。

還有一點(diǎn)就是，如果想要實(shí)現(xiàn)上傳圖片前判斷圖片文件的大小，必須通過C#代碼來實(shí)現(xiàn)，這個(gè)不能簡(jiǎn)單地通過js腳本來實(shí)現(xiàn)，因?yàn)樯婕暗綖g覽器對(duì)客戶端文件訪問權(quán)限的限制。也就是說，需要將頁(yè)面預(yù)先提交到服務(wù)器，判斷完成后通知客戶端接下來的行為，為了避免頁(yè)面提交時(shí)客戶端原有的狀態(tài)丟失，可以采用隱藏iFrame的方式提交頁(yè)面，這個(gè)在文章的一開始我已經(jīng)提到過了。

總之，在Web中實(shí)現(xiàn)多附件上傳必須借助于javascript來動(dòng)態(tài)創(chuàng)建DOM，編輯狀態(tài)下可以在服務(wù)端將事先處理好的DOM添加到頁(yè)面上，并同時(shí)附件腳本事件，在服務(wù)端代碼和客戶端代碼之間注意保存各個(gè)控件的狀態(tài)。

分享：如何實(shí)現(xiàn)C#中用鼠標(biāo)移動(dòng)頁(yè)面的功能
項(xiàng)目中需要實(shí)現(xiàn)以下功能：打印預(yù)覽控件中，可以用鼠標(biāo)拖動(dòng)頁(yè)面，以查看超出顯示范圍之外的部分內(nèi)容。該功能本來可以通過拉動(dòng)水平和垂直滾動(dòng)條來實(shí)現(xiàn)，但實(shí)際使用中，用戶更趨向于直接用鼠標(biāo)拖動(dòng)頁(yè)面來實(shí)現(xiàn)，很多看圖類軟件都有這種類似的功能。而.net的打