ckfinder.net完全讲解六(模拟选择ckfinder选择按钮,并保存上传文件路径)
2013-08-04 19:03
441 查看
本文主要模仿ckfinder中自定义文件右键选择按钮,实现选择文件并添加链接至页面中
1.添加js引用(注意不要添加ckfinder_v1.js引用,会执行有误)
2.添加js
3.添加按钮等控件
![](http://img.blog.csdn.net/20130804190314578?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmd5dWFud2VpODg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
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.点击上传按钮,选择要文件
相关文章推荐
- ckfinder.net完全讲解八(ckfinder获取选择文件夹,获取选中文件)
- Asp.Net上传文件,保存文件路径到数据库
- Asp.Net上传文件示例(保存文件路径到数据库)
- input file文件上传CSS模拟为 选择 加 上传 两个按钮
- Asp.Net上传文件示例(保存文件路径到数据库)
- asp.net 点击一个按钮弹出对话框选择文件然后选择文件完成之后就自动上传文件 input(file)
- ckfinder.net完全讲解五(ckfinder按钮失效禁用)
- CKFinder(Java版)以时间作上传文件的保存路径
- ckfinder.net完全讲解一(文件右键添加菜单)
- Asp.Net上传文件示例(保存文件路径到数据库)
- ASP.NET MVC 文件上传和路径处理总结
- Asp.net单按钮上传文件和批量上传图片
- 在C#.net中做页面上传的程序。用Dhtml的控件:(创建文件上载控件,该控件带有一个文本框和一个浏览按钮。)和类HtmlInputFile的两种方法
- JSP多文件上传,动态添加文件选择框和按钮,并添加事件
- org.apache.commons.net.ftp.FTPClient----根据文件名,路径检索文件 FTP上传 下载 删除文件
- ASP.NET MVC文件上传下载Demo(文件保存在数据库)
- 百度编辑器(UEditor)调用上传图片、上传文件等模块,并修改图片、文件的保存路径
- Asp.Net 上传大文件专题(3)--从请求流中获取数据并保存为文件[上]
- layUI中点击按钮选择图片(不自动上传),然后点击上传按钮,上传图片(可以上传多个文件)
- winform模拟asp.net的表单上传文件