本文主要模仿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.點擊上傳按鈕,選擇要文件