KCFinder画像のアップロード

Question

私はKCFinder（seen here）の「Choose an Image」オプションを使用していますが、1つではなく複数の画像領域を持つことができますか？ここで

は、画像/アップロードエリアの3つのインスタンス（「形式」で包み、提出上のデータベースに保存された）と私のHTML/PHPのコードです：ここで

<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が同じIDを使用しているため、最初の画像領域にのみ画像が追加されます。

私がこれを正しく説明しているかどうかはわかりませんが、ここではあらかじめ、多くの感謝をしています。

Answer 1

私は（IMG要素を見つけるために、横断jqueryのを使用して）これがどうなると思います。答えを

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