[javascript]Klikken op browse-knop van file input simuleren

[Verwijderd]

Omdat het vanuit CSS onmogelijk is om de browse knop van een file-input control te stylen, en de standaardwaarden nogal lelijk zijn, heb ik bedacht om het hele file-control te verbergen (met position: absolute en waarden die buiten het scherm vallen), en een nep-file control te maken wat de waardes kopieert van het echte control.

Het lukt me echter niet om een klik op de browse knop te simuleren. Hier is de code in kwestie:

code:

            <label for="nzb_file">Local nzb file</label><br>
            <form name="nzb_file_form" id="nzb_file_form" enctype="multipart/form-data" target="upload_frame" method="post">
                <input type="file" name="nzb_file" id="nzb_file">
            <span class="link" onclick="document.nzb_file_form.nzb_file.click();">Browse</span>
            </form>

Ik krijg geen javascript fouten, maar er gebeurt niets. Ik heb ook al het volgende geprobeerd:
- nzb_file_form.nzb_file.click(); (doet ook niets)
- this.form.nzb_file.click(); (this.form heeft geen properties)

Oh ja, ik gebruik Firefox. De bedoeling is dat het gaat werken op alle standard-compliance browsers (dus eigenlijk alles behalve Interweb Exploder, maar daar werkt het toch al niet mee omdat IE geen javascript ondersteunt).

Heeft iemand enig idee hoe ik dit moet oplossen?

[crisp]

Firefox ondersteund geen click() op file-inputs. Het enige wat je kan doen is iets over de file-input button positioneren waarop geklikt kan worden; het click-event zal dan door-bubblen naar de file-input.

[Verwijderd]

Duidelijk. Ik heb wel dit gevonden: http://www.faqts.com/know...ew.phtml/aid/9368/fid/128

Maar daar snap ik helemaal niets van, zou anders wel interessant moeten zijn geloof ik.
Ik heb dus nu het file-input weer in het zichtbare gedeelte van het formulier gezet. In firefox kan ik nu heel makkelijk met -moz-opacity: 0; het object onzichtbaar maken terwijl je er nog steeds op kan klikken. Alleen, dit werkt alleen in Mozilla (Firefox). Als ik visibility: hidden; doe, kan ik er niet meer op klikken.

Is er een geldige manier om iets onzichtbaar te maken, terwijl je er nog wel op kan klikken? Ik heb ook al filter: alpha(opacity: 0); en opacity: 0; gevonden, maar ik wil dus niet dat er straks in een of andere browser ineens een lelijke knop verschijnt.

[crisp]

Verwijderd schreef op zondag 13 maart 2005 @ 14:43:
Duidelijk. Ik heb wel dit gevonden: http://www.faqts.com/know...ew.phtml/aid/9368/fid/128

Maar daar snap ik helemaal niets van, zou anders wel interessant moeten zijn geloof ik.
Ik heb dus nu het file-input weer in het zichtbare gedeelte van het formulier gezet. In firefox kan ik nu heel makkelijk met -moz-opacity: 0; het object onzichtbaar maken terwijl je er nog steeds op kan klikken. Alleen, dit werkt alleen in Mozilla (Firefox). Als ik visibility: hidden; doe, kan ik er niet meer op klikken.

Is er een geldige manier om iets onzichtbaar te maken, terwijl je er nog wel op kan klikken? Ik heb ook al filter: alpha(opacity: 0); en opacity: 0; gevonden, maar ik wil dus niet dat er straks in een of andere browser ineens een lelijke knop verschijnt.

Er is geen enkele garantie dat je het goed gaat krijgen in elke browser die in omloop is. Dit soort elementen zijn nu eenmaal erg lastig wb styling. Je hoeft het element natuurlijk niet helemaal onzichtbaar te maken, als je er maar iets overheen positioneerd wat het hele element bedekt - dan zie je 'm ook niet meer. Dat is in IE en Firefox nog wel goed te krijgen.

[Vinzzz243]

kijk hier eens http://www.quirksmode.org/dom/inputfile.html

[Clay]

Er kan vrij weinig met de file input, en dat is maar goed ook. Hoe goed jouw bedoelingen misschien zijn, het is belangrijker om misbruik onmogelijk te maken dan om goedwillenden handigheidjes te bieden die potentieel gevaarlijk zijn in verkeerde handen.

Met gebruik van de DOM functies create- en dispathEvent functies kan je ook in mozilla wel events simuleren, maar ook dat heeft weer security beperkingen - bijvoorbeeld met de file input

edit:
Zie URL van Vinzzz

Dat werkt idd wel. Enige nadeel wat ook onderaan die pagina staat uitgelegd is dat je dat veld niet meer leeg kan maken, tenzij je met de gegeven suggesties daarvoor aan de gang gaat. Flinke berg moeite en ranzigheden voor enkel een andere button als je het mij vraagt

[ Voor 26% gewijzigd door Clay op 13-03-2005 15:00 ]

[Verwijderd]

Clay schreef op zondag 13 maart 2005 @ 14:53:
Er kan vrij weinig met de file input, en dat is maar goed ook. Hoe goed jouw bedoelingen misschien zijn, het is belangrijker om misbruik onmogelijk te maken dan om goedwillenden handigheidjes te bieden die potentieel gevaarlijk zijn in verkeerde handen.

Met gebruik van de DOM functies create- en dispathEvent functies kan je ook in mozilla wel events simuleren, maar ook dat heeft weer security beperkingen - bijvoorbeeld met de file input

Dat begrijp ik. Maar ik wil helemaal niets in de file-input veranderen. Ik wil alleen maar klikken op de browse-knop simuleren. Daar is toch niets onveiligs aan?

Maar goed. Ik ben al weer een stukje verder. Het volgende probleem is dat ik niet de breedte van de file-input kan instellen. Zodra ik dat namelijk doe, verschuift het control naar rechts, maar hij wordt dus mooi niet kleiner. Hoe kleiner ik de width waarde zet, hoe meer het control naar rechts verschuift.

Ik wil eigenlijk het control zo smal maken, dat de breedte van de tekstbox die eraan hangt praktisch nul is. er moet namelijk links een upload-knop komen, en die werkt anders niet, omdat de klik wordt doorgestuurd naar de tekstbox.

[Verwijderd]

Het wil nog steeds niet helemaal lukken.

Ik kan namelijk de breedte van de browseknop niet instellen, en daarom is deze in elke browser anders, waardoor het me niet lukt de knop precies onder mijn "nep-knop" te krijgen.

Ik ben daarom verder gaan zoeken naar opties om toch vanuit javascript op de knop te drukken. Ik ben toen uitgekomen bij createEvent, wat de cross-browser oplossing voor dit soort zaken moet zijn. (Er staan tenminste voorbeelden op voor Mozilla e.d.)

Na een en ander bestudeert te hebben heb ik het volgende geproduceerd:

code:

function BrowseClick()
{
    var ClickBrowseButton = document.createEvent("MouseEvents");
    ClickBrowseButton.initEvent("click", false, false);
    
    document.nzb_file_form.nzb_file.dispatchEvent(ClickBrowseButton);
}

Ik krijg er geen javascript fouten bij, maar de code werkt niet. Uiteraard heb ik het ook geprobeerd op te lossen via getElementById, maar zonder resultaat.

Het * moet * toch gewoon mogelijk zijn? Heeft iemand een idee, of kan iemand mij vertellen hoe ik in ieder geval de breedte van de file-input kan instellen. In mijn vorige post legde ik al uit dat dat ook niet helemaal lekker werkt.

Bij voorbaat dank.

[Clay]

De code werkt wel, maar het voert niet een click uit zoals de gebruiker dat zou doen, het roept alleen de onclick functie van dat object aan in de juist scope. Probeer b.v. eens:

code:

function createClick() {
    var click = document.createEvent("MouseEvents");
    click.initEvent("click", false, false);
    document.getElementById('test').dispatchEvent(click);
}

met

code:

<input type="file" id="test" onclick="alert('ey')" />

[ Voor 12% gewijzigd door Clay op 15-03-2005 13:19 ]

[Verwijderd]

Aha, ik had dus te hoge verwachtingen van createEvent(). Is er misschien een andere functie waarmee dit mogelijk is? Ik begin er nu langzamerhand een beetje wanhopig door te worden.

Of anders misschien een manier om de breedte van de input box met CSS in te stellen, want ook dat wil me niet echt lukken.

[Verwijderd]

crisp schreef op zondag 13 maart 2005 @ 14:46:
[...]

Er is geen enkele garantie dat je het goed gaat krijgen in elke browser die in omloop is. Dit soort elementen zijn nu eenmaal erg lastig wb styling. Je hoeft het element natuurlijk niet helemaal onzichtbaar te maken, als je er maar iets overheen positioneerd wat het hele element bedekt - dan zie je 'm ook niet meer. Dat is in IE en Firefox nog wel goed te krijgen.

Ik heb het nu bijna helemaal voor elkaar, d.m.v. een iframe (dat is het enige element waar de knop niet uit kan breken), en ik ben zelf erg tevreden over het resultaat.

Het enige probleem wat ik nu nog heb is dat als ik een element over de knop heen plaats (vanuit het document ín het iframe wel te verstaan) de knop niet meer reageert.

Ik heb dat probleem nu "opgelost" door de knop een hogere z-index waarde te geven, en te verbergen met "opacity: 0;" en dit werkt goed in browsers die al CSS3 ondersteunen. Helaas zijn er nog teveel browsers die dit niet kunnen (opera en zo). Is dit misschien op een andere manier mogelijk? Ik dacht zelf dat het mogelijk moest zijn met "eventBubble" maar met Google kom ik er absoluut niet uit (ik weet ook niet zeker dat het zo heet).

[crisp]

Heb je al eens goed gekeken naar http://www.quirksmode.org/dom/inputfile.html - daarin staan toch alle ingredienten die je nodig hebt om het mogelijk te maken...

[Verwijderd]

quote: van de pagina die je noemde

A browser must support opacity to support this technique. Therefore it doesn't work in Explorer 5.0 on Windows, Explorer 5 on Mac and Opera.

En dat wil ik dus anders. Niet dat IE dus, dat intereseert me echt geen bal, maar goede browsers (Konqueror, Firefox, Opera, etc) wil ik wel hebben werken, en uit jouw post maakte ik op dat dat moet kunnen.

[ Voor 35% gewijzigd door Verwijderd op 17-03-2005 23:23 . Reden: Uitgebreider. ]

[crisp]

Verwijderd schreef op donderdag 17 maart 2005 @ 23:19:
[...]


En dat wil ik dus anders. Niet dat IE dus, dat intereseert me echt geen bal, maar goede browsers (Konqueror, Firefox, Opera, etc) wil ik wel hebben werken, en uit jouw post maakte ik op dat dat moet kunnen.

Ik heb Opera nergens expliciet genoemd, en volgens mij krijg je het in Opera al helemaal niet voor elkaar of je moet wellicht hele ranzige technieken uit de kast gaan trekken die de toegankelijkheid zeker niet ten goede zullen komen. De methode van PPK vind ik eigenlijk al over the top; usability en toegankelijkheid gaan bij mij nog altijd boven design...