进入:/kindeditor/plugins/image/image.js,替换其中的 self.plugin.imageDialog = function (options)方法,代码为:

self.plugin.imageDialog = function (options) {
var imageUrl = options.imageUrl,
imageWidth = K.undef(options.imageWidth, ''),
imageHeight = K.undef(options.imageHeight, ''),
imageTitle = K.undef(options.imageTitle, ''),
imageAlign = K.undef(options.imageAlign, ''),
       imageSize = options.imageSize*1024,
showRemote = K.undef(options.showRemote, true),
showLocal = K.undef(options.showLocal, true),
tabIndex = K.undef(options.tabIndex, 0),
clickFn = options.clickFn;
var target = 'kindeditor_upload_iframe_' + new Date().getTime();
var hiddenElements = [];
for (var k in extraParams) {
hiddenElements.push('<input type="hidden" name="' + k + '" value="' + extraParams[k] + '" />');
}
var html = [
'<div style="padding:20px;">',
//tabs
'<div class="tabs"></div>',
//remote image - start
'<div class="tab1" style="display:none;">',
//url
'<div class="ke-dialog-row">',
'<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>',
'<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" />  ',
'<span class="ke-button-common ke-button-outer">',
'<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
'</span>',
'</div>',
//size
'<div class="ke-dialog-row">',
'<label for="remoteWidth" style="width:60px;">' + lang.size + '</label>',
lang.width + ' <input type="text" id="remoteWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',
lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',
'<img class="ke-refresh-btn" src="' + imgPath + 'refresh.png" width="16" height="16" alt="" style="cursor:pointer;" title="' + lang.resetSize + '" />',
'</div>',
//align
'<div class="ke-dialog-row">',
'<label style="width:60px;">' + lang.align + '</label>',
'<input type="radio" name="align" class="ke-inline-block" value="" checked="checked" /> <img name="defaultImg" src="' + imgPath + 'align_top.gif" width="23" height="25" alt="" />',
' <input type="radio" name="align" class="ke-inline-block" value="left" /> <img name="leftImg" src="' + imgPath + 'align_left.gif" width="23" height="25" alt="" />',
' <input type="radio" name="align" class="ke-inline-block" value="right" /> <img name="rightImg" src="' + imgPath + 'align_right.gif" width="23" height="25" alt="" />',
'</div>',
//title
'<div class="ke-dialog-row">',
'<label for="remoteTitle" style="width:60px;">' + lang.imgTitle + '</label>',
'<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="width:200px;" />',
'</div>',
'</div>',
//remote image - end
//local upload - start
'<div class="tab2" style="display:none;">',
'<iframe name="' + target + '" style="display:none;"></iframe>',
'<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + K.addParam(uploadJson, 'dir=image') + '">',
//file
'<div class="ke-dialog-row">',
hiddenElements.join(''),
'<label style="width:60px;">' + lang.localUrl + '</label>',
'<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" />  ',
'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',
'</div>',
'</form>',
'</div>',
//local upload - end
'</div>'
].join('');
var dialogWidth = showLocal || allowFileManager ? 450 : 400,
dialogHeight = showLocal && showRemote ? 300 : 250;
var dialog = self.createDialog({
name: name,
width: dialogWidth,
height: dialogHeight,
title: self.lang(name),
body: html,
yesBtn: {
name: self.lang('yes'),
click: function (e) {
// Bugfix: http://code.google.com/p/kindeditor/issues/detail?id=319
if (dialog.isLoading) {
return;
} var f = uploadbutton.fileBox[0].files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
//加载图片获取图片真实宽度和高度
var image = new Image();
image.onload = function () {
var width = image.width;
var height = image.height;
if (f.size > imageSize) {
alert("图片大小超过限制");
return; } if (width != imageWidth || height != imageHeight) {
alert("图片尺寸不对");
return;
} // insert local image
if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) {
if (uploadbutton.fileBox.val() == '') {
alert(self.lang('pleaseSelectFile'));
return;
}
dialog.showLoading(self.lang('uploadLoading'));
uploadbutton.submit();
localUrlBox.val('');
return;
}
// insert remote image
var url = K.trim(urlBox.val()),
width = widthBox.val(),
height = heightBox.val(),
title = titleBox.val(),
align = '';
alignBox.each(function () {
if (this.checked) {
align = this.value;
return false;
}
}); if (url == 'http://' || K.invalidUrl(url)) {
alert(self.lang('invalidUrl'));
urlBox[0].focus();
return;
}
if (!/^\d*$/.test(width)) {
alert(self.lang('invalidWidth'));
widthBox[0].focus();
return;
}
if (!/^\d*$/.test(height)) {
alert(self.lang('invalidHeight'));
heightBox[0].focus();
return;
}
clickFn.call(self, url, title, width, height, 0, align); };
image.src = data;
};
reader.readAsDataURL(f); }
},
beforeRemove: function () {
viewServerBtn.unbind();
widthBox.unbind();
heightBox.unbind();
refreshBtn.unbind();
}
}),
div = dialog.div; var urlBox = K('[name="url"]', div),
localUrlBox = K('[name="localUrl"]', div),
viewServerBtn = K('[name="viewServer"]', div),
widthBox = K('.tab1 [name="width"]', div),
heightBox = K('.tab1 [name="height"]', div),
refreshBtn = K('.ke-refresh-btn', div),
titleBox = K('.tab1 [name="title"]', div),
alignBox = K('.tab1 [name="align"]', div); var tabs;
if (showRemote && showLocal) {
tabs = K.tabs({
src: K('.tabs', div),
afterSelect: function (i) { }
});
tabs.add({
title: lang.remoteImage,
panel: K('.tab1', div)
});
tabs.add({
title: lang.localImage,
panel: K('.tab2', div)
});
tabs.select(tabIndex);
} else if (showRemote) {
K('.tab1', div).show();
} else if (showLocal) {
K('.tab2', div).show();
} var uploadbutton = K.uploadbutton({
button: K('.ke-upload-button', div)[0],
fieldName: filePostName,
form: K('.ke-form', div),
target: target,
width: 60,
afterUpload: function (data) {
dialog.hideLoading();
if (data.error === 0) {
var url = data.url;
if (formatUploadUrl) {
url = K.formatUrl(url, 'absolute');
}
if (self.afterUpload) {
self.afterUpload.call(self, url, data, name);
}
if (!fillDescAfterUploadImage) {
clickFn.call(self, url, data.title, data.width, data.height, data.border, data.align);
} else {
K(".ke-dialog-row #remoteUrl", div).val(url);
K(".ke-tabs-li", div)[0].click();
K(".ke-refresh-btn", div).click();
}
} else {
alert(data.message);
}
},
afterError: function (html) {
dialog.hideLoading();
self.errorDialog(html);
}
});
uploadbutton.fileBox.change(function (e) {
localUrlBox.val(uploadbutton.fileBox.val());
});
if (allowFileManager) {
viewServerBtn.click(function (e) {
self.loadPlugin('filemanager', function () {
self.plugin.filemanagerDialog({
viewType: 'VIEW',
dirName: 'image',
clickFn: function (url, title) {
if (self.dialogs.length > 1) {
K('[name="url"]', div).val(url);
if (self.afterSelectFile) {
self.afterSelectFile.call(self, url);
}
self.hideDialog();
}
}
});
});
});
} else {
viewServerBtn.hide();
}
var originalWidth = 0, originalHeight = 0;
function setSize(width, height) {
widthBox.val(width);
heightBox.val(height);
originalWidth = width;
originalHeight = height;
}
refreshBtn.click(function (e) {
var tempImg = K('<img src="' + urlBox.val() + '" />', document).css({
position: 'absolute',
visibility: 'hidden',
top: 0,
left: '-1000px'
});
tempImg.bind('load', function () {
setSize(tempImg.width(), tempImg.height());
tempImg.remove();
});
K(document.body).append(tempImg);
});
widthBox.change(function (e) {
if (originalWidth > 0) {
heightBox.val(Math.round(originalHeight / originalWidth * parseInt(this.value, 10)));
}
});
heightBox.change(function (e) {
if (originalHeight > 0) {
widthBox.val(Math.round(originalWidth / originalHeight * parseInt(this.value, 10)));
}
});
urlBox.val(options.imageUrl);
setSize(options.imageWidth, options.imageHeight);
titleBox.val(options.imageTitle);
alignBox.each(function () {
if (this.value === options.imageAlign) {
this.checked = true;
return false;
}
});
if (showRemote && tabIndex === 0) {
urlBox[0].focus();
urlBox[0].select();
}
return dialog;
};

  

kindeditor 限制上传图片大小及宽高的更多相关文章

  1. 获取图片的大小(宽高):BytesIO

    获取图片的大小(宽高) from io import BytesIO,StringIO import requests from PIL import Image img_url = "ht ...

  2. 关于PHP HTML <input type="file" name="img"/>上传图片,图片大小,宽高,后缀名。

    在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...

  3. 关于actionscript中新建一个sprite,设置大小(宽高)的问题。

    有一定as3开发经验的童鞋应该知道,新建一个sprite,是无法设置大小的,即时设置了,也不会生效,宽高还是为0,据说反而有副作用(http://www.cnblogs.com/yjmyzz/arch ...

  4. js上传图片获取原始宽高

    以vue上传图片为例: <template> <div> <input type="file" @change="uploadFile($e ...

  5. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

  6. jquery操作html中图片宽高自适应

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...

  7. vue element-ui 组件上传图片 以及对 图片的 宽高 和 大小 格式等 做出限制

    vue  文件: 自行引用 elemen-ui    <el-upload                         action=" 让后端给你上传地址 "      ...

  8. elementUI 图片上传限制上传图片的宽高

    文件上传,需当上传的文件类型为图片的时候,需要限制图片的宽高. 此处采用了new Promise异步加载的方式,等图片上传加载完成后, 页面代码: <el-form-item label=&qu ...

  9. 根据设备宽高动态设置View的大小

    得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...

随机推荐

  1. 昨天刚看了Handler和HandlerThread这个东西,不明白为什么要用这么复杂的东西,而且Handler直接post的话好像还不是子线程运行。那我再开发的时候直接用Thread行不行?两个有什么区别?

    Handler就是android中一个机制,主要是考虑到线程安全的! Handler是可以实现线程间通信的,LZ知道Android的UI线程不安全的吧,也就是说不可以在UI线程以外的其他线程对UI进行 ...

  2. BZOJ 2038: [2009国家集训队]小Z的袜子(hose) 【莫队算法模版】

    任意门:https://www.lydsy.com/JudgeOnline/problem.php?id=2038 题意概括: 有 N 只袜子(分别编号为1~N),有 M 次查询 (L, R)里面随机 ...

  3. Java+maven+selenium3+testng 自动化测试环境IDEA

    idea .java环境变量jdk maven安装及环境变量配置这里就不多说了,网上有很多教程 这里我们只检测一下java.maven环境是否安装成功 win+R,运行cmd命令行:mvn -v   ...

  4. 11.多线程&&并发

    11.1 操作系统中线程和进程的概念 一些常见的概念: 程序:指令和数据的byte序列,eg:qq.exe;a2. 进程:正在运行的程序(如QQ);a3.一个进程中可能有一到多个线程. 线程的概念:T ...

  5. 卸载MySQL以及重装卡到Start Services的解决办法(亲测有效,刚重装成功)

    卸载MySQL以及重装卡到Start Services的解决办法 重装系统永远是个好办法,但是对于我们程序员来说只要一想到电脑上的环境变量和其他的配置就蔫了.所以这一条就当作是废话吧. 一般来说装My ...

  6. LeetCode 中级 - 翻转矩阵后的得分(861)

    有一个二维矩阵 A 其中每个元素的值为 0 或 1 . 移动是指选择任一行或列,并转换该行或列中的每一个值:将所有 0 都更改为 1,将所有 1 都更改为 0. 在做出任意次数的移动后,将该矩阵的每一 ...

  7. ABAP术语-LUW (Logical Unit of Work)

    LUW (Logical Unit of Work) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/04/1089637.html Logi ...

  8. 设置Vim编辑器里Tab的长度,行号

    使用Vim编辑器写脚本时,经常会遇到多重循环语句,习惯上会用tab键来补齐.这时设置tab键占用的长度,可以调节界面的松紧度,使其达到令人满意的效果. 在针对个别用户和所有用户来设置时,与编辑SSH相 ...

  9. POCO TCPServer 解析

    POCO C++ Libraries提供一套 C++ 的类库用以开发基于网络的可移植的应用程序,功能涉及线程.文件.流,网络协议包括:HTTP.FTP.SMTP 等,还提供 XML 的解析和 SQL ...

  10. visio studio code 用chrom启动打开本地html

    { // 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述. // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linki ...