網站地圖 | RSS訂閱 老鐵博客 - 上海SEO優化|上海網站建設|蜘蛛池出租|站群代搭建
你的位置:首頁 ? 網站建設 ? 正文

kindeditor上傳圖片后自動縮放尺寸

2016-11-23 12:58:23 | 作者:老鐵SEO | 7個評論 | 人瀏覽

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  編輯器  文件操作  文件上傳  
  • 已有7位網友發表了一針見血的評論,你還等什么?

    必填

    選填

    記住我,下次回復時不用重新輸入個人信息

    必填,不填不讓過哦,嘻嘻。

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    色情激情片日本大全