ckfinder的使用

引入<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>

 

posted @ 2017-06-14 17:19  陈东的博客  阅读(662)  评论(0编辑  收藏  举报