<input type="file"> mit grafischem Button?

[Manuel]

Hallo Leute,

kennt jemand eine Möglichkeit bei einem <input type="file"> Tag den "Durchsuchen" Button durch einen eigenen (grafischen Button zu ersetzen?

Für den IE 5 hab ichs so gelöst:

...
<script language="javascript">

function openFileExplorer()
{
   document.getElementById("anhang1Hidden").click();
   fileName = document.getElementById("anhang1Hidden").value;
   document.getElementById("anhang1").value = fileName;
}
</script>

...

<div id="hiddenLayer" style="visibility:hidden">
<form name="helperForm">
   <input id="anhang1Hidden" type="file">
</form>
</div>

...

<input id="anhang1" name="anhang1" size="15"><input type="button" value="durchsuchen" onClick="openFileExplorer();">

Ich habe also das <input type="file"> Tag durch ein stinknormales
<input type="text"> und einen normalen Button ersetzt (welche man ja bekannterweise durch css, etc... selbst gestalten kann.

Das Dumme ist nur, dass der Netscape 6.2 bei mir (Win2k) die click() Methode auf das file-input-objekt nicht unterstützt (d.h. es öffnet sich das Dateieingabe Fenster nicht)

Aber vielleicht geht das ganze auch viel einfacher leichter oder wie auch immer.

Es wäre wirklich nett wenn mir da jemand weiterhelfen könnte.

Danke

Gruß Manuel

[Sven Rautenberg]

Moin!

kennt jemand eine Möglichkeit bei einem <input type="file"> Tag den "Durchsuchen" Button durch einen eigenen (grafischen Button zu ersetzen?

Für den IE 5 hab ichs so gelöst:
Ich habe also das <input type="file"> Tag durch ein stinknormales
<input type="text"> und einen normalen Button ersetzt (welche man ja bekannterweise durch css, etc... selbst gestalten kann.

Das Dumme ist nur, dass der Netscape 6.2 bei mir (Win2k) die click() Methode auf das file-input-objekt nicht unterstützt (d.h. es öffnet sich das Dateieingabe Fenster nicht)

Du spielst da ein gefährliches Spiel.

Gewöhnlicherweise ist der Dateiauswahlbutton ein sehr wichtiges Element in einem Formular. Es ist zumindest für den Benutzer extrem wichtig, denn durch das (je Browser) identische Aussehen ist gewährleistet, daß er sich immer bewußt ist, daß er bei Benutzung dieses Formularelements eine Datei aus seinem privaten Bereich an andere Leute sendet.

Ich kann mir gut vorstellen, daß aus diesem Grunde in Browsern gewisse Dinge mit diesem Formularelement nicht machbar sind. Dazu zählt unter anderem die Unmöglichkeit der Vorbelegung mit einem Wert (Opera erlaubt das, zeigt aber vor dem Abschicken des unveränderten Formulars eine deutliche Warnmeldung an - ich frage mich, ob das sich nicht auch mal wieder ändern könnte, sobald Schindluder damit getrieben wird), und offenbar auch die Unmöglichkeit, per Javascript einen Klick zu simulieren.

Deshalb der Rat: Wenn du Dateien hochladen lassen willst, mußt du gezwungenermaßen das Aussehen und Verhalten des Dateiauswahlknopfes hinnehmen. Nur dann ist gewährleistet, daß die Benutzer hinreichend informiert sind über die potentiellen Auswirkungen ihres Handelns. Daß der IE eine alternative Methode (die ja, wie du zugeben wirst, auch eher krumm als glatt ist) zuläßt, spricht gegen diesen Browser.

- Sven Rautenberg

[Manuel]

Nochmals hallo,

Du spielst da ein gefährliches Spiel.

Gewöhnlicherweise ist der Dateiauswahlbutton ein sehr wichtiges Element in einem Formular.

Hey, mir wärs ja auch lieber wenn ich den normalen Button samt Textfeld verwenden könnte (vielleicht muss ichs ja doch noch).
Die Seite enthält natürlich nicht nur ein Eingabefeld, sondern mehrere, die durch CSS-Formatierung einen anderen Rahmen und Schriftgroesse (ohne Schattierung) haben als normalerweise
Leider wird die CSS Formatierung für das input type="file" Element im NS6 nicht übernommen.
Du kannst dir vielleicht vorstellen das das insgesamt ziemlich bescheiden aussieht, wenn man zwei unterschiedlich aussehende Input Felder nebeneinander hat.

Es ist zumindest für den Benutzer extrem wichtig, denn durch das (je Browser) identische Aussehen ist gewährleistet, daß er sich immer bewußt ist, daß er bei Benutzung dieses Formularelements eine Datei aus seinem privaten Bereich an andere Leute sendet.

Das ist zwar richtig, aber die Seite die programmiere ist nicht für jederman, sondern nur für Geschäftskunden der Firma für die ich arbeite. Es wird (nicht von mir) davon ausgegangen, dass Leute, die im IT-Umfeld arbeiten sich durchaus darüber im klaren sind was passiert, wenn sie eine Datei zum upload bereitstellen.

Ich kann mir gut vorstellen, daß aus diesem Grunde in Browsern gewisse Dinge mit diesem Formularelement nicht machbar sind. Dazu zählt unter anderem die Unmöglichkeit der Vorbelegung mit einem Wert (Opera erlaubt das, zeigt aber vor dem Abschicken des unveränderten Formulars eine deutliche Warnmeldung an - ich frage mich, ob das sich nicht auch mal wieder ändern könnte, sobald Schindluder damit getrieben wird), und offenbar auch die Unmöglichkeit, per Javascript einen Klick zu simulieren.

So wie es ausssieht lässt sowiso nur der IE den simulierten Click zu also bringts auch nichts das zu verwenden (Keine Crossbrowser-Tauglichkeit)

Deshalb der Rat: Wenn du Dateien hochladen lassen willst, mußt du gezwungenermaßen das Aussehen und Verhalten des Dateiauswahlknopfes hinnehmen. Nur dann ist gewährleistet, daß die Benutzer hinreichend informiert sind über die potentiellen Auswirkungen ihres Handelns. Daß der IE eine alternative Methode (die ja, wie du zugeben wirst, auch eher krumm als glatt ist) zuläßt, spricht gegen diesen Browser.

Trotzdem Vielen Dank für Deine Einschätzung.

Gruß Manuel

[Sven Rautenberg]

Yo!

Hey, mir wärs ja auch lieber wenn ich den normalen Button samt Textfeld verwenden könnte (vielleicht muss ichs ja doch noch).
Die Seite enthält natürlich nicht nur ein Eingabefeld, sondern mehrere, die durch CSS-Formatierung einen anderen Rahmen und Schriftgroesse (ohne Schattierung) haben als normalerweise
Leider wird die CSS Formatierung für das input type="file" Element im NS6 nicht übernommen.
Du kannst dir vielleicht vorstellen das das insgesamt ziemlich bescheiden aussieht, wenn man zwei unterschiedlich aussehende Input Felder nebeneinander hat.

Aus denselben Grunden (der Unverwechselbarkeit) ist die Formatierung von File-Feldern nicht gestattet.

Du bist in der Tat in der Zwickmühle. Lass einfach den anderen Inputfeldern ihr normales Aussehen, und alles ist in Butter. :)

Das ist zwar richtig, aber die Seite die programmiere ist nicht für jederman, sondern nur für Geschäftskunden der Firma für die ich arbeite. Es wird (nicht von mir) davon ausgegangen, dass Leute, die im IT-Umfeld arbeiten sich durchaus darüber im klaren sind was passiert, wenn sie eine Datei zum upload bereitstellen.

Davon kann man nicht ausgehen. Auch (oder gerade?) im IT-Umfeld gibt es ganz viele DAUs. :->

- Sven Rautenberg