KCFinder圖片上傳

Question

我正在使用KCFinder的“選擇圖像”選項（請參見此處 ），想知道如何/是否可以有多個圖像區域而不是只有一個？

這是我的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，因此只會將圖像添加到第一個圖像區域。

不知道我是否正確解釋了這個問題，但是這里...預先表示感謝。

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'
);
   }