Datei öffnen Dialog

T

Tiefschneetaucher

Mitglied
Ach wenn es etwas verspätet ist, ein frohes neues wünsch ich noch allen zusammen. Auch im neuen Jahr will ich die Gemeinschaft mal wieder mit Fragen löchern ;)

Und zwar im Zuge des Ajax- respektive Web 2.0 (grausames Wort)Wahn hätte ich mal eine Frage bezüglich eines Upload Scripts. Das heißt es geht mir einfach nur darum den Datei öffnen Dialog zu starten ohne das ich dabei ein hässliches Input Feld auf der Seite anzeigen muss.

im IE läuft das ja zur Abwechslung mal ganz gut mittels click() welches ich auf ein Input Feld anwende aber diesmal muckt der Firefox. Das es aber OHNE sichtbares Feld geht und in beiden Browsern angezeigt wird, weiß ich von folgenden Seiten

http://aariadne.com/uploadform/
http://www.shauninman.com/assets/examples/styling-file-inputs/

Gut das erste Beispiel ist ein wenig arg aufwändig aber ich finde das zweite verdeutlicht ganz gut was ich meine – einfach n Button und schon geht der ganze Dialog auf. Jedoch bin ich aus dem Script nicht wirklich schlau geworden. Wenn ich mir das runterlade bekomme ich trotzdem immer n Inputfeld angezeigt und aus den JavaScript geht (für mich) auch nicht hervor wie das ganze realisiert ist. Aber vielleicht seh‘ ich den Wald vor lauter Bäumen auch nicht ?
 
Hi !

Also das erste hab ich nicht eingebunden, hab mir den kompletten Quelltext aus dem 2. Script kopiert und die Links zu den eingebundenen Scripten erweitert so das sie direkt von deren Server kommen. Aber wirklich was passieren tut dabei nicht.
 
Naja wie du an deinen 2. Link sehen kannst ist dies eine reine CSS Geschichte , der Input Button selber liegt in einen label ( heisst das so ? ) naja , dieses label hat ein Hintergrund Bild die schnucklige Grafik.

Das Input Feld selber wird einfach transparent gemacht sieht man an -moz-opacity:0;

Mehr scheint das gar nicht zu sein in meinen Augen.

Nachtrag :

der gute alte Firebug :P

Also wenn ich das richtig verstanden habe macht er eigentlich nur folgendes er setzt ein lable ein , dieses Lable hat den Input Button und dieser Input Button wird einfach ausserhalb des sichtbaren bereichs gequetscht.

Code: 
<input type="file" class="file" style="top: 0px; left: -178px;"/>

dieses Element zeigt mir der Firebug im entsprechenden label an.

also nach meinen Tests mit deren CSS :

Code: 
<html>
    <head>
        <style type="text/css">
            .ifield {
                position:relative;
                width:30px;
                height:30px;
                background:#FF00CC;
                display: block;
                overflow: hidden;
                cursor: pointer;
            }
            
            .file {
                height:100px;
                width:auto;
                opacity:0;
                position:relative;
                left:-169px;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <form method="post" action="#">
            <label class="ifield">
                <input type="file" class="file"></input>
            </label>
        </form>
    </body>
</html>

kommt es hin ;) Über JS müsste man dann blos filzen wie weit das Input feld verschoben werden muss nach links oder nach oben , nach rechts oder unten ist schlecht , da fängt man an zu scrollen.
 
Zuletzt bearbeitet:
von hinten, durch die Brust ins Auge ;) Aber gut was tut man nicht alles damit es "schnuckelig" wird ;)

Besten dank erstmal für die ausführlicher Erklärung - werd das mal ausprobieren und künftig die Leute nur noch mit solchen Konstrukten beglücken (wenn Zeit dazu bleibt) ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück