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