进入:/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=319if (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 imageif (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 imagevar 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;};

  

转载于:https://www.cnblogs.com/lkd3063601/p/7458948.html

kindeditor 限制上传图片大小及宽高相关推荐

  1. vue项目中,上传图片做像素大小宽高的限制

    vue项目中,上传图片做像素大小宽高的限制 <el-uploadclass="avatar-uploader"action="http://upload.qiniu ...

  2. javascript 快速获取图片实际大小的宽高

    javascript 快速获取图片实际大小的宽高 简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...

  3. 批量提取图片信息[大小、宽高尺寸和分辨率]

    批量提取图片信息[大小.宽高尺寸和分辨率] 说明 使用步骤 脚本源码 说明 本脚本适用于,导出当前脚本所在文件夹下所有的图片的信息,包括文件名,大小,尺寸,分辨率;导出为CSV文件 使用步骤 1.将以 ...

  4. java获取上传图片的大小_java 图片上传的处理,获取图片大小,宽高。

    jsp代码 名称 * 图片 内容 js 方法 $(form).ajaxSubmit({ type: "POST", url:"photoes/addup", d ...

  5. 自定义kindeditor富文本默认的宽高

    一.说明 二.结论 三.效果图如下 四.应用场景 一.说明 F12查看富文本发现:默认宽是650px <div class="ke-container ke-container-def ...

  6. quick cocos2d-x 精灵大小(宽高)获取

    quick下sprite的大小获取,记录一下: local w = sprite:getContentSize().width local h = sprite:getContentSize().he ...

  7. element-ui upload组件上传图片时限制图片宽高

    template部分代码,引入upload组件,这里采用自动上传文件 <div class="filesC"> <el-upload ref="file ...

  8. Unity 在代码中 动态改变RectTransform位置及宽高 的方法整理

    原文链接(尊重原著):[100个 Unity实用技能] | Unity 在代码中 动态改变RectTransform位置及宽高 的方法整理_unity 修改recttransform_呆呆敲代码的小Y ...

  9. 上传图片时,图片大小不一,设置宽高,图片拉伸,如何处理呢,我来告诉你...

    2019独角兽企业重金招聘Python工程师标准>>> 对于上传图片的烦恼,今天给你个例子,很实用的哦 这个是原来大小不一的图片 经过处理后 代码如下index.html <! ...

最新文章

  1. 谷歌放出AI平民化大招: 李飞飞宣布推出AutoML云平台,让普通企业也能用上深度学习
  2. python 字符串匹配 正则 re
  3. mysql. Oracle创建视图,Navicat 教程:Oracle 视图
  4. 浅析去中化区块链游戏资产交易平台
  5. 将hive查询内容存储到文件中
  6. 很久很久之前的一道面试题(老师的生日是那一天?)~
  7. [C#][DevPress]手动添加控件中的子控件或者结构
  8. java判断两个矩形是否相交_判断矩形相交以及求出相交的区域
  9. 网页中,列表数据的分页加载、自动加载
  10. ROSTCM6情感分析结果乱码
  11. python ocr识别身份证_如何使用Tesseract训练基于Python的OCR以使用不同的国家身份证?...
  12. spring的核心组件
  13. 在xsl中插入有大于、小于符号JavaScript,CSS代码的方法
  14. 管家婆云辉煌快速实现远程云打印
  15. kaldi 源码分析(五) - 开发环境
  16. java-php-python-ssm员工婚恋交友平台计算机毕业设计
  17. 【Python数据分析与可视化】自行车租赁统计数据分析(综合实训)
  18. 加拿大留学生回国学历认证问题汇总
  19. 【C++】逆波兰表达式 + 反向迭代器的实现
  20. HTML超级马里奥代码(简单)

热门文章

  1. MaxDos启动盘拆解
  2. 塞班之死---放眼iOS的寒冬
  3. ImageIO 框架详细解析
  4. 操作符!与操作符!!的区别
  5. 斑马打印机客户端GET和POST,以及后端两种打印方式。
  6. 别慌,不就是跨域么!
  7. 误报的java.sql.SQLException: Parameter number 21 is not an OUT parameter
  8. spring 随笔(一) bean Dependency Injection
  9. 魅族显示无法连接到服务器,魅族连接电脑无法识别怎么办_魅族手机usb无法连接电脑的解决方法...
  10. 高质量代码才能最快投入生产