网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 网站建设 » 正文

kindeditor上传图片后自动缩放尺寸

2016-11-23 12:58:23 | 作者:老铁SEO | 5个评论 | 人浏览

kindeditor上传图片后,自动缩放超出指定尺寸(宽高)的图片,不超过的则显示原图。

如下图中所示,指定宽度为600px,第一张小图宽不超过则显示原图,第二张大图宽超过则将宽缩放为600px。

测试版本为:KindEditor 4.1.11,单个图片上传和批量图片上传都可以。

以下是KE的调用代码(重点是上传文件后的回调函数 afterUpload 里的代码 ):

<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
<script>
var KE;
KindEditor.ready(function(K) {
    KE = K.create('#content',{
        uploadJson : 'kindeditor/asp/upload_json.asp',
        fileManagerJson : 'kindeditor/asp/file_manager_json.asp',
        allowFileManager : true, //浏览图片空间
        filterMode : false, //HTML特殊代码过滤
        afterBlur: function(){ this.sync(); }, //编辑器失去焦点(blur)时执行的回调函数(将编辑器的HTML数据同步到textarea)
        afterUpload : function(url, data, name) { //上传文件后执行的回调函数,必须为3个参数
            if(name=="image" || name=="multiimage"){ //单个和批量上传图片时
                var img = new Image(); img.src = url;
                img.onload = function(){ //图片必须加载完成才能获取尺寸
                    if(img.width>600) KE.html(KE.html().replace('<img src="' + url + '"','<img src="' + url + '" width="600"'))
                }
            }
        }
    });
});
</script>
<textarea id="content" name="content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea>


  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:KindEditor  编辑器  文件操作  文件上传  
  • 已有5位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。