Question

我正在使用KCFinder（seen here）的“选择图像”选项，想知道我是否可以拥有多个图像区域而不仅仅是一个？

这是我的html / php代码，包含3个图像/上传区域实例（以“表单”包装并在提交时保存到数据库中）：

<label>Logo: </label><div class="image" onclick="openKCFinder(this)"><img src="'.$_POST['logo'].'" alt="" id="img" /></div>
<input type="hidden" name="logo" value="'.$_POST['logo'].'" id="image" /> <br />

<label>Header Image: </label><div class="image" onclick="openKCFinder(this)"><img src="'.$_POST['h_image'].'" alt="" id="img" /></div>
<input type="hidden" name="h_image" value="'.$_POST['h_image'].'" id="image" /> <br />

<label>Side Advert Image: </label><div class="image" onclick="openKCFinder(this)"><img src="'.$_POST['side_advert'].'" alt="" id="img" /></div>
<input type="hidden" name="side_advert" value="'.$_POST['side_advert'].'" id="image" /> <br />

以下是打开图片上传器的代码：

function openKCFinder(div) {    
window.KCFinder = {
    callBack: function(url) {
        window.KCFinder = null;
        div.innerHTML = '<div style="margin:5px">Loading...</div>';
        var img = new Image();
        img.src = url;
        img.onload = function() { 

            div.innerHTML = '<img id="img" src="' + url + '" />';   

            $('#image').attr('value', url);

            var img = document.getElementById('img');
            var o_w = img.offsetWidth;
            var o_h = img.offsetHeight;
            var f_w = div.offsetWidth;
            var f_h = div.offsetHeight;
            if ((o_w > f_w) || (o_h > f_h)) {
                if ((f_w / f_h) > (o_w / o_h))
                    f_w = parseInt((o_w * f_h) / o_h);
                else if ((f_w / f_h) < (o_w / o_h))
                    f_h = parseInt((o_h * f_w) / o_w);
                img.style.width = f_w + "px";
                img.style.height = f_h + "px";
            } else {
                f_w = o_w;
                f_h = o_h;
            }
            img.style.marginLeft = parseInt((div.offsetWidth - f_w) / 2) + 'px';
            img.style.marginTop = parseInt((div.offsetHeight - f_h) / 2) + 'px';
            img.style.visibility = "visible";
        }
    }
};
window.open('http://www.websitename/admin/ckeditor/kcfinder/browse.php?type=images&dir=images/public',
    'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
    'directories=0, resizable=1, scrollbars=0, width=800, height=600'
);
   }

如何使图像上传器独立地为每个图像区域工作？目前它只会将图像添加到第一个图像区域，因为它们都使用相同的ID。

不确定我是否已经正确解释了这一点但是这里...非常感谢提前，s。

Answer 1

我想这会做（使用jquery遍历来查找img元素）：

function openKCFinder(div) {    
window.KCFinder = {
    callBack: function(url) {
        div.innerHTML = '<div style="margin:5px">Loading...</div>';
        var img = new Image();
        img.src = url;
        img.onload = function() { 

            var img = $(div).html('<img class="img" src="' + url + '" />').children('img').attr('value', url).get(0); // using jquery you can get the desirent img element:)

            var o_w = img.offsetWidth;
            var o_h = img.offsetHeight;
            var f_w = div.offsetWidth;
            var f_h = div.offsetHeight;
            if ((o_w > f_w) || (o_h > f_h)) {
                if ((f_w / f_h) > (o_w / o_h))
                    f_w = parseInt((o_w * f_h) / o_h);
                else if ((f_w / f_h) < (o_w / o_h))
                    f_h = parseInt((o_h * f_w) / o_w);
                img.style.width = f_w + "px";
                img.style.height = f_h + "px";
            } else {
                f_w = o_w;
                f_h = o_h;
            }
            img.style.marginLeft = parseInt((div.offsetWidth - f_w) / 2) + 'px';
            img.style.marginTop = parseInt((div.offsetHeight - f_h) / 2) + 'px';
            img.style.visibility = "visible";
        }
    }
};
window.open('http://www.websitename/admin/ckeditor/kcfinder/browse.php?type=images&dir=images/public',
    'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
    'directories=0, resizable=1, scrollbars=0, width=800, height=600'
);
   }

KCFinder图片上传

1 个答案: