引入<script type="text/javascript" src="${ctxStatic}/ckfinder/ckfinder.js"></script>

function BrowseServer(inputId){
var finder = new CKFinder() ;
finder.basePath = '${ctx}/static/ckfinder/'; //导入CKFinder的路径
finder.selectActionFunction = SetFileField; //设置文件被选中时的函数
finder.selectActionData = inputId; //接收地址的input ID
finder.popup() ;
};
//文件选中时执行
function SetFileField(fileUrl,data)
{
var NfileUrl = fileUrl.substring(fileUrl.indexOf('/',fileUrl.indexOf('/')+1));
var img = "<img src ='"+ fileUrl +"' alt='' style= 'position:absolute;left:0;top:0;bottom:0;right:0;max-width:200px;max-height:200px'>";
var imgi = "<input type='hidden' name='bannerPic' value='"+NfileUrl+"' />";
$("#imgeConId").append(imgi);
$("#imgeConId").append(img);
}
<div class="control-group">
<label class="control-label">热点图片:</label>
<%-- <div class="controls">
<form:input path="bannerPic" htmlEscape="false" maxlength="255" class="input-xlarge "/>
</div> --%>
<div class="controls">
<input type="button" value="添加" onclick="BrowseServer('image')" />
<div class="box" style="width:100%">
<ul style="overflow:hidden;margin:10px;padding:2px;list-style:none;">
<li id="imgeConId" style="float:left;width:200px; height:200px; position:relative;" >
</li>
</ul>
</div>
</div>
</div>

ckfinder的使用的更多相关文章

  1. MVC配置ckeditor+ckfinder

    ckeditor当前使用版本:4.5.8 ckfinder当前使用版本:2.6.0 1.Ckeditor配置简单,直接使用Nuget下载就可 2.下载ckfinder https://cksource ...

  2. CKEditor与CKFinder整合 MVC3

    今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了.于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病. 所以记录一下自己 ...

  3. 基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder

    Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...

  4. CKEditor与CKFinder的配置(ASP.NET环境)

    CKEditor是一个专门使用在网页上的所得文字编辑器,适用于PHP.ASP.NET.Java等后端开发语言.CKEditor原名为FCKeditor,“FCK” 是这个编辑器的作者的名字Freder ...

  5. 单独使用CKfinder上传图片

    首先引入ckfinder.js <script type="text/javascript" src="<%=request.getContextPath() ...

  6. .net环境下ckeditor与ckfinder中文文件链接乱码的问题

    .net环境下ckeditor与ckfinder中文文件链接乱码的问题 将ckfinder.js中的getUrl:function(){return this.folder.getUrl()+enco ...

  7. .net_ckeditor+ckfinder的图片上传配置

    CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...

  8. struts2整合CKEditor和CKFinder实现上传

    上一篇文章给大家分享了CKEditor+CKFinder+JSP实现了在线编辑器上传图片的功能,这里在给大家分享一下如何在前面的基础上在struts2下实现这样的功能. 实现与Struts2的整合,整 ...

  9. jsp中如何整合CKEditor+CKFinder实现文件上传

    最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...

  10. ASP.NET版CKEditor与CKFinder的配置使用

    ASP.NET版 CKEditor与CKFinder的配置使用 将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEd ...

随机推荐

  1. TCP连接数配置

    一般的设置规则为: 系统最大文件数>可用端口>用户最大文件数 sysctl -a | grep file-max cat /proc/sys/fs/file-max 这表明这台Linux系 ...

  2. js添加删除class

    添加: obj.classList.add("active"); 删除:obj.classList.remove("active");例子 <button ...

  3. JavaScript getClass() 函数

    定义和用法 getClass() 函数可返回一个 JavaObject 的 JavaClass. 语法 getClass(javaobj) 参数 描述 javaobj 一个 JavaObject 对象 ...

  4. 乌班图docker版本18.04升级到19.03

    # 关闭docker sudo systemctl stop docker # 卸载旧版本: sudo apt-get purge docker-ce # 安装新版本 sudo apt update ...

  5. emqttd学习教程(二):emqttd配置说明

    一.配置文件说明emqttd消息服务器通过 etc/ 目录下配置文件进行设置,主要配置文件包括: 配置文件 说明 etc/emq.conf 消息服务器配置文件etc/acl.conf 默认ACL规则配 ...

  6. 关于函数中参数kwarg.setdefault()的用法

    1.kwarg.setdefault() setdefault()是给字典传递一个默认值    当给字典传递数据时 setdefault()是字典默认的一个参数,当有新的数据时,就会使用新的数据

  7. 2019-03-19 Fiori学习笔记 Fiori开发环境

    Fiori 文档 :https://experience.sap.com/fiori-design-web/ Fiori 登录:https://cloudplatform.sap.com/index. ...

  8. 转载 STM32 使用Cubemx 建一个USB(HID)设备下位机,实现数据收发

    STM32 使用Cubemx 建一个USB(HID)设备下位机,实现数据收发  本文转载自 https://www.cnblogs.com/xingboy/p/9913963.html 这里我主要说一 ...

  9. Oracle 数据字典视图(V$,GV$,X$)

    常用的几个数据字典: user_objects : 记录了用户的所有对象,包含表.索引.过程.视图等信息,以及创建时间,状态是否有效等信息,是非DBA用户的大本营.想知道自己有哪些对象,往这里查. u ...

  10. UniEAP Platform V5.0 Unable to compile class for JSP

    流程设计器报错: http://127.0.0.1:8080/framework/workflow/webdesign/procmodify/procmodifydetail.jsp?isLoadDa ...