positie knop uploaden bestand

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jovank vank

jovank vank

26/10/2014 09:21:00
Quote Anchor link
Hallo,
Ik heb een form waarmee ik onder andere een image wil uploaden. Naast de knop voor het selecteren van het bestand, op dezelfde regel, staat in 1e instantie dat je nog geen bestand hebt geselecteerd. Daar komt ook de naam te staan van het bestand. Dit alles in Chrome. In IE komt de naam weer voor de knop.
Is er iemand die weet hoe ik die tekst onder de knop kan krijgen????
In ieder geval heel erg bedankt!
Jos
 
PHP hulp

PHP hulp

25/05/2020 16:15:52
 
Jan R

Jan R

26/10/2014 09:38:23
Quote Anchor link
De tekst van een button staat onder value en toch altijd in de knop?
Als je deze onder de knop wilt krijgen zal je moeten uitlijnen met labels en/of div/span.
Anders eens code (relevante) tonen.
 
Jovank vank

jovank vank

26/10/2014 09:54:18
Quote Anchor link
Hi,
In dit geval is het een 'input veld'.
De tekst 'bestand kiezen' staat dan standaard in de knop en de tekst 'geen bestand gekozen' staat (in eerste instantie) rechts van de knop.
Ik heb code, (maar ben bang dat ik dat hier zo niet mag plaatsen.)
<code><input type="file" name="photoimg" id="photoimg" /></code>
Overigens zijn de standaard teksten per browser verschillend.
Jos
 
Ivo P

Ivo P

26/10/2014 10:07:43
Quote Anchor link
Dat is gewoon een standaard eigenschap van de browser. Dat kun je maar beperkt stylen.
 
- Ariën -
Beheerder

- Ariën -

26/10/2014 10:10:12
Quote Anchor link
Jep, en daarom brengen sommige mensen een layer aan met z-index'es als ik me niet vergis om hem een eigen styling mee te geven.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

26/10/2014 10:15:38
Quote Anchor link
Nee jan het gaat om de fileupload knop. Hierbij komt het pad naast de knop te staan van het bestand dat je hebt gekozen.

Het beste dat je kunt doen is de tekst naast de knop helemaal verbergen. zie dit voorbeeld: http://codepen.io/anon/pen/JrjHv

Daarna kun je dit voorbeeld er in verwerken om de tekst weer te geven zoals jij dit wilt: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fileupload_files
 
Jovank vank

jovank vank

26/10/2014 11:39:44
Quote Anchor link
Hi Frank,
Geweldig bedankt. Dat is precies wat ik zocht.
De multipel input doe ik nog maar even niet. Ik pas namelijk een jquery upload functie, die direct de afbeelding plaatst. En dat vond ik al ingewikkeld genoeg..........
Jos
 
Jovank vank

jovank vank

02/11/2014 14:54:02
Quote Anchor link
Hi Frank,
Ik weet niet of je dit nog leest. Inmiddels begrijp ik de opzet. De knoppen staan op -1000. Dus ver 'boven' de pagina. Nu wil het dat als je op de bestand-kiezen knop drukt, het scherm de originele knop zoekt. En dus schuift het scherm omhoog. De knoppen krijg je niet te zien, maar mijn foto schuift onder van het scherm af. Kan ik de knoppen niet ergens ver links van het scherm plaatsen of zo??

Jos
 
Eddy E

Eddy E

02/11/2014 21:57:10
Quote Anchor link
Ja: wellicht met margin-left: 100000000px of margin-top: -1000000000px;
 
Frank Nietbelangrijk

Frank Nietbelangrijk

02/11/2014 23:37:46
Quote Anchor link
Je moet niet de originele knop zoeken maar de <label> lijkt me. overigens snap ik je vraag niet helemaal..

In mijn voorbeeld klikt de gebruiker op de <label> en niet op de knop. als je daar op klikt dan moet dat label in beeld komen? Maar als een gebruiker daar op klikt dan staat ie toch al in beeld?
 
Jovank vank

jovank vank

03/11/2014 11:05:09
Quote Anchor link
Hi Frank, Het gaat erom dat de oorspronkelijke knop naar boven, buiten het beeld is geschoven door in de css op te nemen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
label input[type="file"] {
    position: fixed;
    top: -1000px;
}

Maar als je op de label klikt, om een image te selecteren, zoekt het programma de oorspronkelijk knop op. Dus schuift alles naar boven. Ik heb het als opgelost door aan de css toe te voegen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
label input[type="file"] {
    position: fixed;
    top: -1px;
    display:none;
]

Nu blijft het scherm gewoon in positie. De knop is echter niet mee te vinden......

ik hoop dat dit een beetje duidelijk is.....
Jos
 
Frank Nietbelangrijk

Frank Nietbelangrijk

03/11/2014 12:37:15
Quote Anchor link
Ja begint te dagen.. goede oplossing, gewoon display:none. Kunnen die andere twee regels er dan ook niet gewoon uit?
 
Eddy E

Eddy E

03/11/2014 13:42:26
Quote Anchor link
display: none;haalt hem ook echt weg: onklikbaar.
Geef dan een opacity: 0; ;)
Of visibility: hidden;.
 
Jovank vank

jovank vank

05/11/2014 12:48:39
Quote Anchor link
Hi Frank,
Ja die kunnen er wel uit.
Thx!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.