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

你怎麼會得到它，這樣的圖片上傳作品independantly每個圖像區域？目前它只會將圖像添加到第一個圖像區域，因爲它們都使用相同的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' 
); 
    }