[原創]FineUI秘密花園（七） — 上傳控件

FineUI直到V3.0才內置了自己的上傳控件，為什么唯獨上傳控件姍姍來遲，這其中的緣由是啥？之前又是如何實現上傳功能的呢？下面聽我慢慢道來。

 

AJAX請求與文件上傳請求的對比

 

普通的AJAX請求的請求頭和請求正文：

 

 

文件上傳請求的請求頭與請求正文：

 

可見，普通的AJAX請求其Content-Type為application/x-www-form-urlencoded，其請求正文是鍵值對組成的查詢字符串；而文件上傳請求其Content-Type為multipart/form-data，其請求正文不僅分段包含正常的表單字段，而且包含要上傳文件的內容。

 

也就是說兩種請求方式完全不同，要在AJAX環境中實現文件上傳，最通用的做法是用一個臨時生成的IFrame來提交文件。而這個過程將會比較復雜，這也是FineUI一直沒有實現自己的文件上傳控件的原因（后來發現ExtJS支持這個過程，所以就有了FineUI自己的FileUpload控件）。

 

 

之前實現文件上傳的方式

由於之前FineUI沒有自己的FileUpload控件，只好求助於ASP.NET的FileUpload控件，並且由於文件上傳的請求不能是AJAX的請求，所以只好采用整個頁面回發的方式（這也是很多網友所抱怨的地方），參見這個示例。

<ext:PageManager ID="PageManager1" runat="server" EnableAjax="false" />
<asp:FileUpload ID="FileUpload1" runat="server"></asp:FileUpload>
<asp:Button ID="btnCloseWindow2" runat="server" Text="上傳文件" OnClick="btnCloseWindow2_Click"></asp:Button>

 

protected void btnCloseWindow2_Click(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        FileUpload1.SaveAs(Server.MapPath("~/upload/" + FileUpload1.FileName));
    }
    Alert.ShowInTop("文件上傳成功！");
}

 

顯示效果如下圖所示：

 

正如前文所述，這個實現有兩個突出問題：1. 文件上傳框風格和整個頁面風格不搭配。 2. 上傳時是整個頁面回發，和FineUI默認的AJAX風格也不搭。

 

 

現在的文件上傳方式

現在就簡單多了，並且也漂亮多了，參考這個示例。

 

<ext:SimpleForm ID="SimpleForm1" BodyPadding="5px" runat="server" EnableBackgroundColor="true"
    ShowBorder="True" Title="表單" Width="350px" ShowHeader="True">
    <Items>
        <ext:TextBox runat="server" Label="用戶名" ID="tbxUseraName" Required="true" ShowRedStar="true">
        </ext:TextBox>
        <ext:FileUpload runat="server" ID="filePhoto" EmptyText="請選擇一張照片" Label="個人頭像" Required="true"
            ShowRedStar="true">
        </ext:FileUpload>
        <ext:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" ValidateForms="SimpleForm1"
            Text="提交">
        </ext:Button>
    </Items>
</ext:SimpleForm>

protected void btnSubmit_Click(object sender, EventArgs e)
{
    string fileName = DateTime.Now.Ticks.ToString() + "_" + filePhoto.FileName;
    if (filePhoto.HasFile)
    {
        filePhoto.SaveAs(Server.MapPath("~/upload/" + fileName));
    }
}

下面來看看FileUpload的屬性:

1. ButtonText：按鈕文本。
2. ButtonOnly：是否只顯示按鈕，不顯示只讀輸入框。
3. ButtonIcon：按鈕圖標。
4. ButtonIconUrl：按鈕圖標地址。
5. PostedFile：上傳的文件。
6. HasFile：是否包含文件。
7. FileName：上傳文件名。

 

還有一個重要的方法 SaveAs，用來將上傳的文本保存到服務器上。

 

 

觀察文件上傳的過程

在文章的最開始我們提到，ExtJS是通過臨時創建一個IFrame來提交文件請求的，下面就通過一個示例來仔細觀察這個過程。

首先在Firefox中打開示例頁面： http://extasp.net/form/fileupload.aspx

打開Firebug，啟用腳本調試功能，在右側搜索框中輸入 Ext.extend(Ext.data.Connection ，將定位到Ext.ajax.request函數，所有的AJAX請求都是由這個函數發出了。

 

注意往下觀察，會看到這樣的代碼：

url = url || form.action;
if(o.isUpload || (/multipart\/form-data/i.test(form.getAttribute("enctype")))) {
        return me.doFormUpload.call(me, o, p, url);
}

很明顯，文件上傳的代碼都是在doFormUpload函數內完成的，下面是此函數的簡化版本（已經刪除了很多不影響理解的代碼）：

doFormUpload: function (o, ps, url) {
    var id = Ext.id(),
        doc = document,
        frame = doc.createElement('iframe'),
        form = Ext.getDom(o.form),
        encoding = 'multipart/form-data';

    Ext.fly(frame).set({
        id: id,
        name: id,
        cls: 'x-hidden'
    });
    doc.body.appendChild(frame);

    Ext.fly(form).set({
        target: id,
        method: POST,
        enctype: encoding,
        encoding: encoding,
        action: url || buf.action
    });

    function cb() {
        var me = this,
            r = {
                responseText: '',
                responseXML: null,
                argument: o.argument
            },
            doc, firstChild;
        doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
        if (doc) {
            r.responseText = doc.body.innerHTML;
            r.responseXML = doc.XMLDocument || doc;
        }
        me.fireEvent(REQUESTCOMPLETE, me, r, o);
    }
    Ext.EventManager.on(frame, LOAD, cb, this);
    form.submit();
}

下面我們來分析一下這個函數表達了哪些思想：

1. 首先第8行到13行是創建一個空的iframe標簽，並追加到頁面的底部。此時的頁面如下圖所示：

 

2. 第15到21行非常重要，注意target: id這個設置，其實是將頁面中表單的提交目標改變為當前窗體中新創建的iframe，而不是當前窗體了。

 

3. 第23行到37行定義回調函數cb。

 

4. 第38行將回調函數注冊為iframe加載完畢時執行的函數。

 

5. 第39行提交表單。注意，此時表單是在新創建的iframe中提交的！

 

6. 再來看看回調函數cb中的處理，首先獲取iframe中body的內容並賦值給響應對象的responseText屬性，然后觸發此次請求的完成事件。此時的頁面效果如下圖所示：

 

7. 至此，完成了文件上傳的AJAX效果。

 

 

小結

文件上傳控件用起來方便，不過內部實現卻不是一帆風順的，這也是它姍姍來遲的原因之一。不過這也是FineUI控件的目標，內部實現可以非常復雜，但是對開發人員的接口一定要盡量簡單。

下一篇文章我們會仔細考察下拉列表在FineUI中的用法。

 

注：《FineUI秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇