Dateiauswahl im Formular

H

hermannhass

Mitglied
Hallo
ich habe ein mehrzeiliges Formular, in dem ich ich u.a. versch. Bilder(Dateinamen)
eintragen kann.
Bild1 < > durchsuchen
Bild2 < > durchsuchen
Bild3 < > durchsuchen
Ich brauche nur die Filenamen, kein Upload.
Habe dies mit type="file" realisiert, aber ist umständlich, da nach dem Abschicken
, zum Editieren und evtl. anderen Formularfehlern Diese felder nicht wieder mit den vorherigen Eingaben vorbesetzt werden können.

Oder gibt es eine Möglichkeit, eine Dateiauswahl-Funktion aufzurufen und das Ergebnis in ein "normales" testfeld zu schicken?

sonst müssen ja jedesmal alle Eingaben, die einen Dateinamen beinhalten, neu eintragen werden oder auf ein Dateiauswahlmenü verzichtet werden.
Oder sehe ich den Wald vor lauter Bäumen nicht mehr.
Danke für Eure Hilfe....
 
Danke das klappt. Kann ich auch das Eingabefeld des type=file Inputs verstecken?
size=0 geht nicht. möchte ja nur ein eingabefeld haben(das normal textfeld wg. vorbesetzung) und das "durchsuchen"-Button ohne Feld
 
Hi,

das Feld alleine kannst du nicht verstecken. Aber vielleicht hilft ein Workaround über CSS.
  1. Es wird ein Holder-Element mit relativer Positionierung erstellt
  2. Das Holder-Element wird so breit wie die Ersatzgrafik für den "Durchsuchen"-Button
  3. Das File-Element wird rechtsbündig und oberhalb (z-Index 2) der Ersatzgrafik angeordnet. Ausserdem wird es über die Transparenz unsichtbar gemacht.
  4. Der Ersatzbutton dient lediglich als grafischer "Anzeigedummy"
Beispiel:
Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.fileHolder{ position: relative;
             width: 76px;
             overflow: hidden;}
.fileInput{ position: absolute;
            z-index: 2;
            right: 0;
            -moz-opacity: 0;
            opacity: 0;
            filter: alpha(opacity: 0);}
 //-->
</style>
</head>
<body>
<form action="help/PHP-file_uploaden.php" enctype="multipart/form-data" method="post">
  <div class="fileHolder">
    <input type="file" class="fileInput" name="file_up" onchange="document.getElementById('fileID').value=this.value;">
    <img src="bilder/fileinput-button.gif" width="76" height="24" border="0" alt="">
  </div>
  <div><input type="text" name="txtFile" id="fileID" value=""></div>
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>
</body>
</html>
Sollte in den aktuellen Browsern funktionieren.

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Zuletzt bearbeitet:
Es empfiehlt sich übrigens, vor dem Senden die file-Inputs aus dem Formular zu entfernen, sonst hast du unnötigen Traffic :)
 
Super,
Herzlichen Dank und vor allem Respekt für die kompententen Antworten.
Werde mir das Hintegrundwissen natürlich "reinziehen", nur oft feht es auch zu wissen/zu definieren, was man überhaupt sucht.
Gracias
Hemann
 
Hi,

mein Fehler - hab beim Tippen an zwei Stellen vergessen, die Grossschreibtaste zu drücken.
Code: 
.fileHolder{ position: relative;
             width: 76px;
             overflow: hidden;}
.fileInput{ position: absolute;
            z-index: 2;
            right: 0;
            opacity: 0;
            -moz-opacity: 0;
            filter: alpha(opacity: 0);}
Ciao
Quaese
 
Menno, kann gar nicht danke genug sagen.
Aber klappte trotzdem.....
ohne die zeile ' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ';
was macht die? zwingt die die korrekte grosskleinschrift, oder warum klappte es ohne die zeile mit "deinen" Styles
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück