Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 24

Thema: bei input type=file nur Durchsuchen-Button anzeigen möglich?

  1. #1
    Benutzer
    Registriert seit
    03.06.2007
    Beiträge
    38

    Standard bei input type=file nur Durchsuchen-Button anzeigen möglich?

    Hi Ihr,

    ist es möglich, einer Grafik ein onclick-Event für das Öffnen des Festplattendialogs zuzuordnen. ich will mit Klick auf eine Grafik den festplattendialog öffnen und dann per onchange (oder wie das noch gleich hieß) sofort nach dem "öffnen" klicken im Festplattendialog den Upload starten ohne irgendwo den Pfad anzuzeigen. ich will den Pfad gar nicht sehen nach Auswahl der datei auf der Festplatte.

    Müsste gehen, aber wie?
    ich hab zwar das hier gefunden: CSS2/DOM - Styling an input type="file"

    aber ich will das Pfad-Input-Feld ja gar nicht stylen sondern ganz weg haben und die Funktionalität des Durchsuchen-Button-Klicks dann auf eine Grafik legen.

  2. #2
    cas
    cas ist offline
    Erfahrener Benutzer Avatar von cas
    Registriert seit
    21.11.2006
    Ort
    Velbert
    Beiträge
    1.594

    Standard

    Hey

    ja es is möglich hier der Code.

    HTML-Code:
    if (!window.SI) { var SI = {}; };
    SI.Files =
    {
            htmlClass : 'SI-FILES-STYLIZED',
            fileClass : 'file',
            wrapClass : 'cabinet',
            
            fini : false,
            able : false,
            init : function()
            {
                    this.fini = true;
                    
                    var ie = 0 //@cc_on + @_jscript_version
                    if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM
                    this.able = true;
                    
                    var html = $$('html')[0];
                    html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
            },
            
            stylize : function(elem)
            {
                    if (!this.fini) { this.init(); };
                    if (!this.able) { return; };
                    
                    elem.parentNode.file = elem;
                    elem.parentNode.onmousemove = function(e)
                    {
                            if (typeof e == 'undefined') e = window.event;
                            if (typeof e.pageY == 'undefined' &&  typeof e.clientX == 'number' && document.documentElement)
                            {
                                    e.pageX = e.clientX + document.documentElement.scrollLeft;
                                    e.pageY = e.clientY + document.documentElement.scrollTop;
                            };
    
                            var ox = oy = 0;
                            var elem = this;
                            if (elem.offsetParent)
                            {
                                    ox = elem.offsetLeft;
                                    oy = elem.offsetTop;
                                    while (elem = elem.offsetParent)
                                    {
                                            ox += elem.offsetLeft;
                                            oy += elem.offsetTop;
                                    };
                            };
    
                            var x = e.pageX - ox;
                            var y = e.pageY - oy;
                            var w = this.file.offsetWidth;
                            var h = this.file.offsetHeight;
    
                            this.file.style.top             = y - (h / 2)  + 'px';
                            this.file.style.left    = x - (w - 30) + 'px';
                            
                    };
            },
            
            stylizeById : function(id)
            {
                    this.stylize($(id));
            },
            
            stylizeAll : function()
            {
                    if (!this.fini) { this.init(); };
                    if (!this.able) { return; };
                    
                    var inputs = $$('input');
                    for (var i = 0; i < inputs.length; i++)
                    {
                            var input = inputs[i];
                            if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)
                            {       this.stylize(input);
                            };
                    };
            }
    };
    Einfach raus kopiern und im Header includen.

    Die CSS hier:
    HTML-Code:
    .SI-FILES-STYLIZED label.cabinet
    {
            width: 120px;
            height: 120px;
            
            display:block;
            cursor: pointer;
    }
    
    .SI-FILES-STYLIZED label.cabinet input.file
    {       cursor: pointer;
            position: relative;
            height: 100%;
            width: auto;
            opacity: 0;
            -moz-opacity: 0;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    }
    
    div.fileupload{
            cursor:pointer;
            width:120px;
            height:120px;
            
            position:relative;
            top: 90px;
            left:70px;
            
            background: url(../../img/fileupload.png) 0 0 no-repeat;
    }
    div.fileupload:hover{
            cursor:pointer;
            width:120px;
            height:120px;
            
            background: url(../../img/fileupload_hover.png) 0 0 no-repeat;
    }
    So müsste dein Input aussehen:
    HTML-Code:
    <div class="fileupload"> 
                            <label class="cabinet" > 
                                    <input type="file" id="upfile" name="upfile" class="file" />
                            </label>
                    </div>
    So und dann bei der Seite wo dein input ist das hier am ende einfügen.

    HTML-Code:
    <script type="text/javascript" language="javascript">
    // <![CDATA[
    SI.Files.stylizeAll();
    // ]]>
    </script>
    Natürlich benötigst du dann noch ein Submitbutton denn kann man ja ganz einfach designen.

    Mit freundlichen Grüßen

    Cas

  3. #3
    Benutzer
    Registriert seit
    03.06.2007
    Beiträge
    38

    Standard

    Wow, tausend Dank für die schnelle und ausführliche Antwort!!! Da such ich mich halb tot und probier zig tausend Dinge aus und dann sowas... cool cool! Endlich ne Lösung.
    Die gute Nachricht ist nun auch: kopiere ich Deinen Krempel in eine neue HTML-Datei, funktioniert alles super.
    Die schlechte: Kopiere ich es in mein (noch nicht öffentliches) Proekt, gehts nicht. Der Button wird angezeigt, aber es passiert schlicht nichts, wenn ich ihn anklicke.
    Aber das ist dann wohl eine schöne Nachmittagsaufgabe...

  4. #4
    Benutzer
    Registriert seit
    03.06.2007
    Beiträge
    38

    Standard

    Nee, war nur nen Schusselfehler. Klappt jetzt auch in der Zielseite super. Nochmal: tausend Dank!

  5. #5
    cas
    cas ist offline
    Erfahrener Benutzer Avatar von cas
    Registriert seit
    21.11.2006
    Ort
    Velbert
    Beiträge
    1.594

    Standard

    Hey

    freut mich das es funkt

    Mit freundlichen Grüßen

    Cas

    PS: wieda was für die rubrig lösungen

  6. #6
    Moderator Avatar von mikdoe
    Registriert seit
    18.01.2009
    Beiträge
    2.188

    Standard

    cas,

    wie müsste das umgebaut werden, wenn ich zwar

    a) gleiche Funktion (also kein Pfad sondern nur Dateiname im Feld) aber

    b) kein Image als "Durchsuchen"-Ersatz haben will sondern einen Standard Button mit zugewiesener CSS Class á la <input type=submit value="Durchsuchen" class=submit-buttons> und

    c) das automatische Absenden nach Dateiauswahl auch nicht haben möchte sondern dieses über den Standard Submit Button der Form?

    Vielen Dank und Grüße

  7. #7
    cas
    cas ist offline
    Erfahrener Benutzer Avatar von cas
    Registriert seit
    21.11.2006
    Ort
    Velbert
    Beiträge
    1.594

    Standard

    Hey,
    ich glaube so wie ich dich verstanden habe müsstest du nur die CSS anpassen. Und einfach im Form Tag ein Submit-Button rein packen.

    Mit freundlichen Grüßen

    Cas
    Erster Erster.

  8. #8
    Neuer Benutzer
    Registriert seit
    02.08.2010
    Beiträge
    4

    Standard undefined??

    Hallo,
    ich bin zufällig auf diesen alten Post gestoßen weil ich sowas auch brauche.
    Ich hoffe jemand schaut noch rein?

    Problem: Habe versucht allen Code in eine HTML Seite zu kopieren und dann auszuführen.
    Der Firebug meldet dann jedoch sofort

    $$ is not defined
    [Break on this error] var html = $$('html')[0];

    Was kann die Ursache sein?

    Gruss und danke
    hawk

  9. #9
    cas
    cas ist offline
    Erfahrener Benutzer Avatar von cas
    Registriert seit
    21.11.2006
    Ort
    Velbert
    Beiträge
    1.594

    Standard

    Hey,
    $$ ist wahrscheinlich nicht definiert!!!

    Ein bisschen mehr Info wäre besser.

    Mit freundlichen Grüßen

    Cas
    Erster Erster.

  10. #10
    Neuer Benutzer
    Registriert seit
    02.08.2010
    Beiträge
    4

    Standard

    Hi Cas,
    danke für deine Hilfe,

    ZitatZitat von cas Beitrag anzeigen
    Hey,
    $$ ist wahrscheinlich nicht definiert!!!
    Ein bisschen mehr Info wäre besser.
    Wenn ich die hätte würde ich sie dir gerne geben
    ich habe deinen Code so wie er war in eine neue HTML Seite kopiert. Direkt beim Laden der Seite, also noch vor dem hochladen der Datei kommt dieser Fehler.

    Ich kopiere es mal so wie ich es gemacht habe.

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    
    <script type="text/javascript">
    /* <![CDATA[ */
    
    if (!window.SI) { var SI = {}; };
    SI.Files =
    {
            htmlClass : 'SI-FILES-STYLIZED',
            fileClass : 'file',
            wrapClass : 'cabinet',
            
            fini : false,
            able : false,
            init : function()
            {
                    this.fini = true;
                    
                    var ie = 0 //@cc_on + @_jscript_version
                    if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM
                    this.able = true;
                    
                    var html = $$('html')[0];
                    html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
            },
            
            stylize : function(elem)
            {
                    if (!this.fini) { this.init(); };
                    if (!this.able) { return; };
                    
                    elem.parentNode.file = elem;
                    elem.parentNode.onmousemove = function(e)
                    {
                            if (typeof e == 'undefined') e = window.event;
                            if (typeof e.pageY == 'undefined' &&  typeof e.clientX == 'number' && document.documentElement)
                            {
                                    e.pageX = e.clientX + document.documentElement.scrollLeft;
                                    e.pageY = e.clientY + document.documentElement.scrollTop;
                            };
    
                            var ox = oy = 0;
                            var elem = this;
                            if (elem.offsetParent)
                            {
                                    ox = elem.offsetLeft;
                                    oy = elem.offsetTop;
                                    while (elem = elem.offsetParent)
                                    {
                                            ox += elem.offsetLeft;
                                            oy += elem.offsetTop;
                                    };
                            };
    
                            var x = e.pageX - ox;
                            var y = e.pageY - oy;
                            var w = this.file.offsetWidth;
                            var h = this.file.offsetHeight;
    
                            this.file.style.top             = y - (h / 2)  + 'px';
                            this.file.style.left    = x - (w - 30) + 'px';
                            
                    };
            },
            
            stylizeById : function(id)
            {
                    this.stylize($(id));
            },
            
            stylizeAll : function()
            {
                    if (!this.fini) { this.init(); };
                    if (!this.able) { return; };
                    
                    var inputs = $$('input');
                    for (var i = 0; i < inputs.length; i++)
                    {
                            var input = inputs[i];
                            if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)
                            {       this.stylize(input);
                            };
                    };
            }
    };
    
    /* ]]> */
    </script>
    
    <style>
    .SI-FILES-STYLIZED label.cabinet
    {
            width: 120px;
            height: 120px;
            
            display:block;
            cursor: pointer;
    }
    
    .SI-FILES-STYLIZED label.cabinet input.file
    {       cursor: pointer;
            position: relative;
            height: 100%;
            width: auto;
            opacity: 0;
            -moz-opacity: 0;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    }
    
    div.fileupload{
            cursor:pointer;
            width:120px;
            height:120px;
            
            position:relative;
            top: 90px;
            left:70px;
            
            background: url(../../img/fileupload.png) 0 0 no-repeat;
    }
    div.fileupload:hover{
            cursor:pointer;
            width:120px;
            height:120px;
            
            background: url(../../img/fileupload_hover.png) 0 0 no-repeat;
    }
    
    </style>
    </head>
    
    <body>
    <form name="cmuds" enctype="multipart/form-data">
    
    <div class="fileupload">  
    <label class="cabinet" > 
    <input type="file" id="upfile" name="upfile" class="file" />
    </label>
    </div>
            
    </form>
    <script type="text/javascript" language="javascript">
    // <![CDATA[
    SI.Files.stylizeAll();
    // ]]>
    </script>
    
    </body>
    </html>

Seite 1 von 3 123 LetzteLetzte

LinkBacks (?)

  1. Sprachen, Phrasen...? - vBulletin Germany Support Forum
    Refback This thread
    10.02.2009, 16:51
  2. Sprachen, Phrasen...? - vBulletin Germany Support Forum
    Refback This thread
    10.02.2009, 11:48

Ähnliche Themen

  1. Formular Input Type File per Javasript versenden
    Von chris109 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 24.09.2007, 13:37
  2. Per Button aus Datenbank löschen
    Von power-tower im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 12.07.2007, 11:15
  3. Input type button
    Von zmaj im Forum Auszeichnungssprachen
    Antworten: 6
    Letzter Beitrag: 25.12.2006, 15:24
  4. <Input type="hidden" ... value auslesen
    Von themAres im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 04.12.2006, 21:42
  5. back button und url
    Von HardySim im Forum Sonstige Probleme
    Antworten: 7
    Letzter Beitrag: 13.09.2006, 15:41

Lesezeichen

Lesezeichen
  • An Mister Wong übertragenMister Wong
  • An YiGG.de übertragenYiGG.de
  • An Google übertragenGoogle
  • An del.icio.us übertragendel.icio.us

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •