mvc单独ckfinder 图片上传

最新推荐文章于 2019-07-10 08:36:54 发布

weixin_30425949

最新推荐文章于 2019-07-10 08:36:54 发布

阅读量108

点赞数

文章标签： java 测试 javascript ViewUI

原文链接：http://www.cnblogs.com/cqstars/p/7294406.html

版权

1、mvc一般在BundleConfig.cs中全局绑定引入jq,所以只引入ckfinder.js

在plugins下拷贝ckfinder就可以

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

下面是主要js代码：

/**
 * 通过ckfinder独立上传文件或图片
 */
//初始化ckfinder
var finder = new CKFinder();
                finder.basePath = '~/plugins/ckeditor/'; //此路径为CKFinder的安装路径，默认为 (default = "/ckfinder/").
                finder.selectActionFunction = SetFileField; //当选中图片时执行的函数
                finder.popup();//调用窗口
    //文件选中时执行
    //fileUrl所选中文件的路径
function SetFileField(fileUrl) {
    $("#xFilePath").val(fileUrl);
    $("#uploadImg").attr("src",fileUrl);
}

3、对应的HTML代码：

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

在项目中，添加产品和修改产品同时用到ckfinder，但内部id一致，没有封装

转载于:https://www.cnblogs.com/cqstars/p/7294406.html