700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > kindeditor 限制上传图片大小及宽高

kindeditor 限制上传图片大小及宽高

时间:2024-06-19 22:00:11

相关推荐

kindeditor 限制上传图片大小及宽高

进入:/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: /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;};

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。