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版本的請注意。