FCKeditor 图片上传限制宽高

精贴 置顶
686 0

1.修改fckeditor\editor\dialog\fck_image\fck_image.js

在最后新增下面JS

//******************************检查要上传图片格式及宽高 Start**********************************************/
function OnLoadImage(sender) {
    if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
        LoadImgeError(sender, '图片格式无效!');
        return false;
    }

    var html = ['<div id="preview_wrapper" style="display: inline-block; width: 10px; height: 10px;background-color: #CCC;"><div id="preview_fake" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"><img id="preview" style="width: 10px; height: 10px;" /></div></div><br /><img id="preview_size_fake" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);visibility: hidden;" />'].join("");

    var imgdiv = document.getElementById("imgdiv");
    if (imgdiv == null || imgdiv == undefined) {
        imgdiv = document.createElement("div");
        imgdiv.id = "imgdiv";
        //imgdiv.style.display = "none";
        imgdiv.innerHTML = html;
        document.getElementById("divUpload").parentNode.appendChild(imgdiv, document.body);
        //document.body.insertAdjacentElement("beforeend", imgdiv);
    }
    else {
        imgdiv.style.display = "";
    }

    var Result = { "width": 0, "height": 0 };
    var objPreview = document.getElementById('preview');
    var objPreviewFake = document.getElementById('preview_fake');
    var objPreviewSizeFake = document.getElementById('preview_size_fake');
    try {
        if (sender.files && sender.files[0]) {
            // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
            objPreview.src = sender.files[0].getAsDataURL();
            objPreview.onload = function() {
                Result = getLoadImageForFire(this);
                try {
                    LoadImageAfter(sender, Result);
                } catch (e) { LoadImageError(sender, e.message); }
                finally {

                    imgdiv.style.display = "none";
                    document.getElementById("divUpload").removeChild(imgdiv);
                    imgdiv = null;

                }
            }

        } else {

            sender.select();


            var imgSrc = document.selection.createRange().text;


            objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
            objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

            Result = getLoadImageForIE(objPreviewSizeFake); //{ "width": objPreviewSizeFake.offsetWidth, "height": objPreviewSizeFake.offsetHeight };
            try {
                LoadImageAfter(sender, Result);
            } catch (e) { LoadImageError(sender, e.message); }
            finally {

                imgdiv.style.display = "none";
                document.getElementById("divUpload").parentNode.removeChild(imgdiv);
                imgdiv = null;

            }
            //autoSizePreview(objPreviewFake, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
            //objPreview.style.display = 'none';

        }
    } catch (e) {
        imgdiv.style.display = "none";
        document.getElementById("divUpload").parentNode.removeChild(imgdiv);
        imgdiv = null;
        LoadImageError(sender, e.message);
    }
}
function getLoadImageForFire(obj) {

    Result = { "width": obj.naturalWidth, "height": obj.naturalHeight };
    var loadcount = 0;
    while (Result.width == 0 && Result.height == 0 && loadcount < 5) {
        Result = { "width": obj.naturalWidth, "height": obj.naturalHeight };
        loadcount++;
    }
    return Result;
}

function getLoadImageForIE(obj) {

    Result = { "width": obj.offsetWidth, "height": obj.offsetHeight };
    var loadcount = 0;
    while (Result.width == 0 && Result.height == 0 && loadcount < 5) {
        Result = { "width": obj.offsetWidth, "height": obj.offsetHeight };
        loadcount++;
    }
    return Result
}
function LoadImageAfter(sender, imginfo) {
    if (FCKConfig.imageMaxWidth > 0 && FCKConfig.imageMaxHeight > 0) {
        if (imginfo.width > FCKConfig.imageMaxWidth || imginfo.height > FCKConfig.imageMaxHeight) {
            LoadImageError(sender, "图片超过最大尺寸。\n最大宽度:" + FCKConfig.imageMaxWidth + ",最大高度:" + FCKConfig.imageMaxHeight + "");
        }
    }
    else if (FCKConfig.imageMaxWidth > 0 && imginfo.width > FCKConfig.imageMaxWidth) {
        LoadImageError(sender, "图片超过最大尺寸。\n最大宽度:" + FCKConfig.imageMaxWidth + ",最大高度:无限");
    }
    else if (FCKConfig.imageMaxHeight > 0 && imginfo.height > FCKConfig.imageMaxHeight) {
        LoadImageError(sender, "图片超过最大尺寸。\n最大宽度:无限,最大高度:" + FCKConfig.imageMaxHeight + "");
    }
}
function LoadImageError(sender, errorinfo) {
    alert(errorinfo);
    location = location;
}

//******************************检查要上传图片格式及宽高 End**********************************************/

2.修改fckeditor\editor\dialog\fck_image.html

<input id="txtUploadFile" style="width: 100%" type="file" size="40" name="NewFile"/>

改成

<input id="txtUploadFile" style="width: 100%" type="file" size="40" name="NewFile" onchange="OnLoadImage(this)" />

3.在fckeditor\fckconfig.js

在“

try{

下面新增

//可上传图片的最大宽度和最大高度 0则不限制
    FCKConfig.imageMaxWidth = 100;
    FCKConfig.imageMaxHeight = 100;

这样子就行了

  • 没有任何评论
今日天气 ···

···

···

···

热门排行
CSS cursor鼠标样式一览表 2012-06-25
.NET后台写JS代码 2011-11-03
网站地址多出jdfwkey的问题解析及... 2010-08-25
数据库xxx的日志已满,请备份该数... 2013-07-19
百度、google、Yahoo网站地图制作... 2011-01-30
<a>标签的伪类书写顺序问题... 2010-09-04
什么是长尾关键词? 2010-09-24
CEO名言 2010-08-31
Mysql 主从数据库同步 2010-09-12
用ASP实现网页BBS 2010-11-01
博主推荐
本个人博客微信公众平台上线啦~~... 2013-10-13
饼哥网络互联上线啦~~要买域名空... 2013-09-20
网站title标题如何正确修改不会被... 2013-08-26
饼哥通讯录系统上线啦,欢迎大家... 2013-08-24
ASP .NET MYSQL 的简单分页 并不... 2013-08-19
网站有弹窗广告这样的站点,百度... 2013-08-17
做淘宝SEO优化需要注意的8大问题 2013-08-17
淘宝网怎么做SEO优化 2013-08-17
站长们要学习的“苍井空精神” 2013-08-17
苹果公司今日发布了iOS 7第五个开... 2013-08-07
随便看看
ASP编程之ActiveX 组件 2010-10-25
ASP设计常见问题及解答精要 2010-11-03
到底什么是情人节? 2013-06-17
11个SEO最常见问题解答 2010-08-30
js生成html的实例 2010-09-12
ASP.NET Web.config配置详解 2010-12-10
ASP中使用Session变量的优缺点 2010-10-25
.net用母版页和内容页实现动态Ti... 2013-08-22
VS快捷键大全 2010-08-25
通用sql分页存储过程 2010-08-27
RSS新闻
传媒新闻
CSDN
八卦新闻
女性新闻
台湾新闻
互联网
军事-新浪博客
IT-新浪博客
汽车新闻
游戏新闻
国际新闻
国内新闻
体育新闻
我的微博
北京 上海 杭州 深圳 广州 成都