单独使用CKfinder上传图片

首先引入ckfinder.js

<script type="text/javascript" src="<%=request.getContextPath()%>/ckfinder/ckfinder.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyUI/jquery.min.js"></script>

因为用了jquery所以也引了下，写原生js也很简单。

下面是主要js代码：

/**
 * 通过ckfinder独立上传文件或图片
 */
//初始化ckfinder
function BrowseServer() {
   var finder = new CKFinder();
    finder.basePath = '<%=request.getContextPath()%>/ckfinder/'; 
    finder.selectActionFunction = SetFileField; //当选中图片时执行的函数
    finder.popup();//调用窗口       
}
    //文件选中时执行
    //fileUrl所选中文件的路径
function SetFileField(fileUrl) {
    $("#xFilePath").val(fileUrl);
    $("#uploadImg").attr("src",fileUrl);
}

对应的HTML代码：

<div>
        <img src="" id="uploadImg" width="90px" height="90px" /> 
        <input type="text" id="xFilePath" readOnly/>
        <input type="button" value="上 传" onclick="BrowseServer()" />
</div>

done！

转载于:https://www.cnblogs.com/savokiss/p/3892356.html