Php KCFinder图像上传

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

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

徽标：


标题图像：


侧边广告图像：

以下是我打开图像上传程序的代码：

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

函数openKCFinder（div）{ window.KCFinder={ 回调：函数（url）{ window.KCFinder=null； div.innerHTML='正在加载…'； var img=新图像（）； img.src=url； img.onload=函数（）{ div.innerHTML=''； $（'#image'）.attr（'value'，url）； var img=document.getElementById（'img'）； var o_w=img.offsetWidth； var o_h=瞄准线外的图像； var f_w=div.offsetWidth； var f_h=俯视外； if（（o_w>f_w）|（o_h>f_h））{ 如果（（f_w/f_h）>（o_w/o_h）） f_w=parseInt（（o_w*f_h）/o_h）； 否则如果（（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”； }否则{ 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=“可见”； } } }; 打开窗户http://www.websitename/admin/ckeditor/kcfinder/browse.php?type=images&dir=images/public', “kcfinder_图像”，“状态=0，工具栏=0，位置=0，菜单栏=0，”+ '目录=0，可调整大小=1，滚动条=0，宽度=800，高度=600' ); } 如何使图像上传器独立地为每个图像区域工作？目前，它只会将一个图像添加到第一个图像区域，因为它们都使用相同的id

不确定我是否正确地解释了这一点，但接下来。。。提前非常感谢，s.

我想这样就可以了（使用jquery遍历查找img元素）：

函数openKCFinder（div）{ window.KCFinder={ 回调：函数（url）{ div.innerHTML='正在加载…'； var img=新图像（）； img.src=url； img.onload=函数（）{ var img=$（div）.html（“”）.children（'img'）.attr（'value'，url）.get（0）；//使用jquery可以获得所需的img元素：） var o_w=img.offsetWidth； var o_h=瞄准线外的图像； var f_w=div.offsetWidth； var f_h=俯视外； if（（o_w>f_w）|（o_h>f_h））{ 如果（（f_w/f_h）>（o_w/o_h）） f_w=parseInt（（o_w*f_h）/o_h）； 否则如果（（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”； }否则{ 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=“可见”； } } }; 打开窗户http://www.websitename/admin/ckeditor/kcfinder/browse.php?type=images&dir=images/public', “kcfinder_图像”，“状态=0，工具栏=0，位置=0，菜单栏=0，”+ '目录=0，可调整大小=1，滚动条=0，宽度=800，高度=600' ); }

---

谢谢你的回答-不幸的是，我似乎无法让它工作。已排序！！！结果是：var img=$（div）.html（“”）.next（'input'）.attr（'value'，url）.get（0）；

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

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