ckfinder.net完全講解六(模擬選擇ckfinder選擇按鈕,並保存上傳文件路徑)

本文主要模仿ckfinder中自定義文件右鍵選擇按鈕,實現選擇文件並添加鏈接至頁面中

1.添加js引用(注意不要添加ckfinder_v1.js引用,會執行有誤

<script src="Js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="CkEditor/ckfinder/ckfinder.js" type="text/javascript"></script>

2.添加js

<script type="text/javascript">
        var api;
        var mydata = function () {//定義變量
            var selectFunctionData;
        };
        var data = new mydata();
        data.selectFunctionData = "lblInfo";
        function BrowseServer(inputId) {
            var finder = new CKFinder();
            finder.basePath = 'CkEditor/ckfinder/'; //ckfinder所在路徑           
            finder.callback = function (api) {//ckfinder創建時函數
                var menuItem = {
                    label: '選擇',
                    command: 'selectFile'//其他地方調用命令標識
                };
                //添加選擇按鈕
                api.addFileContextMenuOption(menuItem, function (api, folder) {
                    CKFinder.tools.callFunction(ref,data);//調用函數
                });
            }

            api = finder.popup(); //調用ckfinder
            var ref = CKFinder.tools.addFunction(function (data) {//定義選擇按鈕回調函數
                var myapi = this.myapi;
                var files = myapi.getSelectedFiles();//獲取選擇文件
                $(files).each(function () {
                    var str = "<a href='" + this.getUrl() + "'>" + this.name + "</a></br>"
                    $("#" + data["selectFunctionData"]).append($(str));
                });
                myapi.closePopup();//關閉ckfinder
                myapi.destroy(function () {//銷燬ckfinder
                    alert('ckfinder 已銷燬.');
                });
            }, { myapi: api });

        }
        function closeServer() {//ckfinder關閉函數
            api.closePopup(function () {
                alert("按鈕關閉");
            });
        }
        function destroyServer() {//ckfinder銷燬函數
            api.destroy(function () {
                alert('The CKFinder instance was destroyed.');
            });
        }
        $(function () {
            $("#btnAdd").click(function () {
                BrowseServer("aa");
            });
            $("#btnClose").click(function () {
                closeServer(); //關閉彈出對話框
                destroyServer(); //銷燬api
            });
            $("#btnDestroy").click(function () {
                destroyServer();
            });
        });
    </script>

3.添加按鈕等控件

 <div>
        <div id="lblInfo">
        </div>
        
        <input type="button" id="btnAdd" value="上傳" />
        <input type="button" id="btnClose" value="關閉" />
        <input type="button" id="btnDestroy" value="銷燬" />
    </div>
4.點擊上傳按鈕,選擇要文件


發佈了32 篇原創文章 · 獲贊 4 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章