擴充EasyUI在頁面中馬上顯示選中的本地圖檔

在編寫前台頁面的時候，有時須要将選中的圖檔夾雜着其它資訊一起上傳到服務端，在選着本地圖檔的時候，為了獲得更好的效果，須要将該圖檔顯示在頁面上。

最初思路有兩個。詳細例如以下：

1、擷取選中檔案的二進制資料再傳遞給畫闆，畫出圖檔來。

2、擷取選中檔案的傳遞給Img标簽。

經過測試，得到例如以下結果：

1、Img标簽的src無法指向本地路徑的檔案，這應該是基于安全考慮的結果吧。

2、通過File API 讀取的檔案二進制資料無法直接傳遞給Cancav畫闆畫出選中圖檔，這也許也是基于安全考慮的結果。

3、經過不懈努力。最終發現了一個解決方法，那就是通過File API的FileReader對象的readAsDataURL将本地圖檔建立出一個虛拟URL傳遞給Img标簽的src。

具體代碼例如以下：

目前項目是基于EasyUi的。以下是頁面的對話框代碼，請關注id="announcePicture"的檔案控件，系統要求在該檔案控件選擇一個圖檔檔案時，将其顯示在id="img"的Img标簽中。

<div id="announceDlg" class="easyui-dialog" style="width:400px;height:550px;padding:10px 20px" closed="true" buttons="#announceDlg-buttons">
    <div class="ftitle">公告資訊</div>
    <form id="fm" method="post" enctype="multipart/form-data">
        <div class="fitem">
            <label>公告Id:</label>
            <input id="announceId" name="announceId" class="easyui-textbox" type="text" value="">
        </div>
        <div class="fitem">
            <label>标題:</label>
            <input type="text" id="announceTitle" name="announceTitle" class="easyui-textbox" value="" data-options="required:true">
        </div>
        <div class="fitem">
            <label>檔案:</label>
            <input class="easyui-filebox" id="announcePicture" name="announcePicture" value="" style="">
        </div>
        <div class="fitem">
            <label>内容:</label>
            <input type="text" id="announceContent" name="announceContent" class="easyui-textbox" value="" data-options="iconCls:'icon-search',multiline:true,required:true" style="height:120px">
        </div>
        <div class="fitem">
            <label></label>
            <img id="img" style="width:160px;height:160px" />
        </div>
    </form>
</div>
<div id="announceDlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="save()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#announceDlg').dialog('close')" style="width:90px">Cancel</a>
</div>           

以下是對EasyUI進行的拓展，添加了getFile方法。該方法能夠擷取目前FileBox對象選中的檔案的File對象。

$.extend($.fn.filebox.methods, {
    getFile: function (myself) {
        var temp = $(myself).next().children("[type='file']");
        var file = document.getElementById(temp.attr("id"));

        if (file.files.length > 0) {
            // 若選中一個檔案，則傳回該檔案的File對象
            return file.files[0];
        }

        // 若未選中不論什麼檔案，則傳回null
        return null;
    }
});           

以下是設定FileBox對象的OnChange事件，當選擇一個圖檔後。執行當中定義的事件處理函數：

$("#announcePicture").filebox({
    onChange: function (event) {

        // 擷取所選檔案的File對象
        var file = $(this).filebox("getFile");

        if (file != null) {
            // 建立FileReader對象
            var reader = new window.FileReader();
            // 定義reader的onload事件
            // 當讀完檔案資訊後觸發onload事件
            reader.onload = function (e) {
                // reader.result儲存着産生的虛拟URL
                $("#img").attr("src", this.result);
            }
            // 讀取指定檔案并形成URL
            reader.readAsDataURL(file);
        }
    }
});           

細心的各位一定會發現，在FileBox對象的OnChange事件處理函數内調用getFile時并未傳遞不論什麼闡述。可是在getFile函數中卻有一個myself參數被運用了。要了解這點須要看一下EasyUI中處理FileBox的源碼：

$.fn.filebox = function (_4ed, _4ee) {
    if (typeof _4ed == "string") {
        var _4ef = $.fn.filebox.methods[_4ed];
        if (_4ef) {
            return _4ef(this, _4ee);
        } else {
            return this.textbox(_4ed, _4ee);
        }
    }
    _4ed = _4ed || {};
    return this.each(function () {
        var _4f0 = $.data(this, "filebox");
        if (_4f0) {
            $.extend(_4f0.options, _4ed);
        } else {
            $.data(this, "filebox", {
                options: $.extend({}, $.fn.filebox.defaults, $.fn.filebox.parseOptions(this), _4ed)
            });
        }
        _4ea(this);
    });
};           

看到 return _4ef(this, _4ee); 這句語句了嗎？EasyUI在調用指定方法時，預設第一個參數為目前對象，而實際傳入的參數，則作為第二個參數來使用。

 原文釋出時間為：2018年01月01日

原文作者：

 會哭的鳄魚

本文來源：

開源中國

如需轉載請聯系原作者