ckfinder .net版本下單獨使用選擇多個文件

CKFinder是一個強大而易於使用的Web瀏覽器的Ajax文件管理器。 其簡單的界面使得它直觀,快速學習的各類用戶,從高級人才到互聯網初學者。ckfinder可以和ckeditor結合使用,也可以單獨使用本示例主要是結合實際應用單獨使用ckfinder上傳附件。

單獨使用ckfinder主要有以下步驟

1.添加引用

 <script src="CkEditor/ckfinder/ckfinder.js" type="text/javascript"></script>
    <script src="CkEditor/ckfinder/ckfinder_v1.js" type="text/javascript"></script>

2.添加控件

<input type="text" name="file" id="file" οnclick="BrowseServer('file');" />

3.編輯js腳本

<script type="text/javascript">
        function BrowseServer(inputId) {
            //alert("aa");
            var finder = new CKFinder();//new 一個ckfinder對象
            finder.BasePath = 'CkEditor/ckfinder/';//ckfinder所在的路徑,建議使用絕對路徑。這js代碼可以添加js文件中,其他地方也可以調用使用
            finder.SelectFunction = SetFileField;//選中上傳文件之後回調函數。
            finder.SelectFunctionData = inputId;//傳給回調函數的一個值(可以填寫是控件的id等,這樣可以在回調函數中給控件賦值)。
            finder.Popup();//彈出ckfinder對話框
        }
        function SetFileField(fileUrl, data) {//回調函數,這種情況是多選了多個文件也只賦值第一個選擇值。
            document.getElementById(data["selectFunctionData"]).value = fileUrl;//給2中的控件賦值。
        }
    </script>

4.多個文件選擇調用及選擇之後自動關閉彈出窗口

function BrowseServer(inputId) {
            //alert("aa");
           var  finder = new CKFinder();
            finder.BasePath = 'CkEditor/ckfinder/';//ckfinder路徑
            finder.selectMultiple = true;//可以多選
            finder.SelectFunction = SetFileField;//選中之後回調函數
            finder.SelectFunctionData = inputId;//傳入的控件值
            finder.Popup();//彈出ckfinder彈窗
            finder.closePopup();//選擇文件之後關閉彈窗
        }

        function SetFileField(fileUrl, data, allFiles) {
             //回調函數, 參數說明,fileurl第一個選中文件所在位置。data,首個選擇文件參數,
             //allFiles所有選中的文件值,是一個json數據。可以使用firebug調試查看數據。
            $(allFiles).each(function() {//遍歷所有值
                var a = "<a href='" + this.url + "'>" + "文件</a>";
                 alert(a);
            });
           // document.getElementById(data["selectActionData"]).value = fileUrl;
           
        }

上述代碼使用的ckfinder asp.net版本的請注意。


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