Kcfinder

Status
Niet open voor verdere reacties.

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.260
Hallo,

Ik heb onderstaande van https://kcfinder.sunhater.com/demos/image
handig om afbeeldingen te uploaden.
Mooiste is de IMAGE versie zie menu links , probleem is echter hoe geef ik de gekozen url door aan bijv. een hidden inputfield zodat deze in een tabel kan worden opgeslagen , aan selecteren alleen heb ik niks.



Code:
<style type="text/css">
#image {
    width: 200px;
    height: 200px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    color: #fff;
}
#image img {
    visibility: hidden;
}
</style>
 
<script type="text/javascript">
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 + '" />';
                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('/demo/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'
    );
}
</script>
 
<div id="image" onclick="openKCFinder(this)"><div style="margin:5px">Click here to choose an image</div></div>


Na selecteren in de broncode pagina:
HTML:
<div id="image" onclick="openKCFinder(this)">
<img id="img" src="/upload/files/type-1/test.jpg" style="width: 200px; height: 134px; margin-left: 0px; margin-top: 33px; visibility: visible;"/>
</div>

Het gaat dus om /upload/files/type-1/test.jpg naar een input value te kopiëren of andere manier om /upload/files/type-1/test.jpg naar een table te schrijven.
 
Laatst bewerkt:
Met wat proberen waar de regel moet komen gaat het misschien lukken. Of de regel hier op de juiste plek staat weet ik niet.
Code:
<input type="hidden" id="imgurl" name="imgurl" value="" />

img.onload = function() {
  document.getElementById('imgurl').value = url;
  div.innerHTML = '<img id="img" src="' + url + '" />';
 
Beste Bron,

Bedankt.
Ik heb de code van jou onder de code van maker gezet , werkt nog niet , plaats afh. wat bedoel je ?
 
Nu staat de regel bij img.onload, dat leek mij een logische plek. Hoger in het script is url gedefinieerd, probeer de regel daar eens.
Code:
img.src = url;
document.getElementById('imgurl').value = url;
img.onload = function() {
Ik ga er vanuit dat je de input regel (berichtje #2) overgenomen hebt in je html.
 
Dit bedoelde je waarschijnlijk niet

Code:
........ laatste van code uit post 1
   window.open('../admin4/kcfinder/browse.php?lang=nl&type=files=files/public', 
        'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
        'directories=0, resizable=1, scrollbars=0, width=800, height=600'
    );
}
</script>
     
 
  <script type="text/javascript">
img.onload = function() {
  document.getElementById('imgurl').value = url;
  div.innerHTML = '<img id="img" src="' + url + '" />';
}
  </script>
   <input type="hidden" id="imgurl" name="imgurl" value="" />


name="imgurl" deze mag variëren de naam?
 
Moest natuurlijk in bestaande functie,,moment denk dat het werkt.
 
Het werkt , ik heb nu

Code:
        <div id="image" onclick="openKCFinder(this)">
          <div style="margin:5px">Kies afbeelding</div>
        </div>
        <script type="text/javascript">
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() {
  document.getElementById('imgurl').value = url;

                div.innerHTML = '<img id="img" src="' + 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('../admin4/kcfinder/browse.php?lang=nl&type=files=files/public', 
        'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
        'directories=0, resizable=1, scrollbars=0, width=800, height=600'
    );
}
</script>
        <input type="hidden" id="imgurl" name="image" value="" />

Ik heb er 2 onder elkaar gezet met code zoals hierboven , omdat er 2 afb. diverse gekozen kunnen worden.
Als ik dan voor de 1e afb. kies wordt input van afb. 2 gekozen (Heb wel de ID andere naam gegeven in afb. 2).
Maar anders hou ik het op EEN afb..
 
Je laatste vraag of opmerking begrijp ik niet helemaal maar ik denk dat je nu verder kan.
Ter info: binnen een pagina moet een id altijd uniek zijn. Twee inputs met dezelfde id mag niet.
 
Ik heb de code zoals in post 7 er 2x ingezet , zodat ik 2 verschillende afbeeldingen kan selecteren en opslaan

dus
document.getElementById('imgurl').value = url;
en
document.getElementById('imgurl2').value = url;
enz.

Ik heb de ID zo ver als mij logisch leek aangepast in 2e code ( ff voor gemak een 2 achter elke iD gezet ),maar dan werkt script niet meer,
wellicht te veel van het goede voor dit script.
 
Wat je wilt doen is niet helemaal duidelijk maar misschien kan je hier iets mee.
Code:
<div id="image1" onclick="openKCFinder(this)">
    <div style="margin:5px">Kies afbeelding</div>
</div>
<div id="image2" onclick="openKCFinder(this)">
    <div style="margin:5px">Kies afbeelding</div>
</div>

<input type="hidden" id="imgurl1" name="imgurl1" value="" />
<input type="hidden" id="imgurl2" name="imgurl2" value="" />

<script type="text/javascript">
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() {
                var divid = div.id;
                if (divid == 'image1') {
                    document.getElementById('imgurl1').value = url;
                } else if (divid == 'image2') {
                    document.getElementById('imgurl2').value = url;
                }
                div.innerHTML = '<img id="img" src="' + url + '" />';
                var img = document.getElementById('img');
                // rest van het script.....
</script>
Echter, het script is niet gemaakt om meerdere keren op een pagina te zetten vanwege deze regel
div.innerHTML = '<img id="img" src="' + url + '" />';
 
Beste Bron

Bedankt wederom.

Dit werkt helaas niet , hou ik het maar op een afbeelding.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan