zoukankan      html  css  js  c++  java
  • 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="60px;">' + lang.remoteUrl + '</label>',
    			'<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="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="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="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="60px;">' + lang.imgTitle + '</label>',
    			'<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="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="60px;">' + lang.localUrl + '</label>',
    			'<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="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,
                 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,
                 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;
        };
    

      

  • 相关阅读:
    第四次作业
    团队编程第三次博客
    团队编程2
    团队编程
    ARM寄存器总结:
    proc介绍及问题分析
    Ubuntu连接手机步骤
    Bluetooth(android 4.2.2版本)
    Android Bluetooth 总结
    android代码常识
  • 原文地址:https://www.cnblogs.com/lkd3063601/p/7458948.html
Copyright © 2011-2022 走看看