KCFinder图片上传

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