吴旭晓个人博客 繁体中文 简体中文

首页| 日志 |JAVA |ASP |PHP |Android |IOS |ASP.NET |JavaScript |DIV+CSS |SEO |taobaoke |饼哥语录
繁体中文 简体中文

FCKeditor 图片上传限制宽高

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;

这样子就行了

作者:吴旭晓 | 来源:个人博客 | 点击量:903 | 发布时间:2014-03-21
最新留言 | 返回上一页 | 返回首页

相关文章:

版权所有:吴旭晓个人博客 Copyright © 2013-2023 个人博客