input type = "file" gestalten

lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess

Autor dieses Themas
zhd-dresden

zhd-dresden hat kostenlosen Webspace.

5:46, 26.1.2017
Guten Morgen liebe Gemeinde,
ich möch te das "tag/input">input type = file nutzen.
Funktioniert auch wunderbar. Da ich es auch auf einem Handy nutzen kann möchte ich den Text, der angibt ob Datei schon gewählt ich nicht neben dem Suchfeldbotonn, sondern darunter haben. Ich finde keine Möglichkeit dazu, kann mir jemand dazu helfen??
Quelle;
https://wiki.selfhtml.org/wiki/HTML/Formulare/input/Datei-Upload

Vielen Dank und einen schönen Tag, Frank
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
itgenie98

itgenie98 hat kostenlosen Webspace.
8:32, 26.1.2017
Meinst du ein ganz einfaches line-break, also
```
<br>
```
?
Autor dieses Themas
zhd-dresden

zhd-dresden hat kostenlosen Webspace.

10:04, 26.1.2017
das hilft da leider nicht weiter. Bei dem input file gibt er die Programmauswahl vor. So wie das im link auch angezeigt wird. Ich finde aber nichts womit ich da in eine zweite (weitere) Zeile anzeigen lassen. kann
itgenie98

itgenie98 hat kostenlosen Webspace.

10:30, 26.1.2017
Man könnte es mit js probieren. Ich kann da mal etwas rumprobieren und mal schauen ob ichs hinbekomme
muellerlukas

muellerlukas hat kostenlosen Webspace.
10:31, 26.1.2017
Auf das "value"-Attribut kannst du lesen zugreifen. Wenn du da jetzt einen onchange-Listener auf das Dateiupload-Feld setzt kannst du also den Dateinamen auslesen und in einem Span, einem Textfeld, ... anzeigen.
Das kann natürlich auch direkt drunter sein.
Jetzt hast du den natürlich noch neben dem Upload-Feld stehen.
Da könntest du jetzt wieder tricksen indem du einen neuen Button anlegst, das Upload-Feld versteckst und beim Klick auf den Button via Javascript den Klick auf das Upload-Feld ausführst.
So z.B:
```
<input type="file" id="file" onChange="alert(this.value)" style="display: none" />
<input type="button" value="Upload" onclick="document.getElementById('file').click()" />
```

15:37, 26.1.2017

Also ich hab grad so etwa 4 (+/-2) Promille, aber so schnell von Hand geschrieben...

<!DOCTYPE html>
<html>
<head>
<style>
	#file{
    	display:none;
    }
    #inputfilelabel{
    	display:block;
        text-align: center;
    	padding: 5px;
        border: solid 1px #000;
        color: #f00;
    }
    
    #inputfilelabel2{
    	display:block;
        text-align: center;
    	padding: 5px;
        border: solid 1px #000;
        color: #0f0;
    	
    }
    #file:invalid ~ #inputfilelabel2{
    	display: none;
    }
    #file:valid ~ #inputfilelabel{
    	display: none;
    }
    
</style>
</head>
<body>
<input type="file" name="file" id="file" required>
<label for="file" id="inputfilelabel">Datei auswählen</label>
<label for="file" id="inputfilelabel2">Fertig</label>
</body>
</html>

Ist es das, was du wolltest? Ansonsten hab ich gefühlt zwei Stunden umsonst nachgedacht :D

Hier zum testen.

Natürlich ist es mit Javascript einfacher. Ich würde aber - falls möglich und der Schrott, den ich da produziert habe funktioniert - immer versuchen, es möglichst ohne zu lösen.

Autor dieses Themas
zhd-dresden

zhd-dresden hat kostenlosen Webspace.

14:37, 27.1.2017
Hallo Müllerlukas und Noxious,
vielen Dank für eure Mühen, das hat mir Beides gut geholfen. Hab mich dann für die zweite Variante entschieden, Macht sich auf dem Handy dekorativer, und in meinem Beginnerstatus kann ich es dann besser gestalten.
Euch ein schönes Wochenende
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city