<input type = "file"> - custom styles/css

Question

Gibt es eine Möglichkeit, <input type="file"> in allen Browsern mit CSS gleich aussehen zu lassen?

Answer 1

Quirksmode.org hat einen interessanten Artikel über sie: http://www.quirksmode.org/dom/inputfile.html

Answer 2

dies versuchen -

1. ein normales nehmen und es in einem Element mit position: relative.
2. Zu diesem gleichen übergeordneten Element, fügen Sie eine normal und ein Bild, die haben die richtigen Stile. Position diese Elemente absolut, so dass sie den gleichen Platz wie die einnehmen.
3. Setzen Sie den Z-Index der auf 2, so dass es auf oben auf dem gestylten Eingang/Bild liegt.
4. Schließlich stellen Sie die Opazität des auf 0 jetzt Das wird effektiv unsichtbar, und die Stile Eingabe/Bild durchscheint, aber man kann immer noch klicken Sie auf „Durchsuchen“ Taste. Wenn die Schaltfläche oben auf dem Bild positioniert ist, scheint der Benutzer auf das Bild zu klicken und erhält die normale Dateiauswahl Fenster. (Beachten Sie, dass Sie Sichtbarkeit nicht verwenden können, weil ein wirklich unsichtbares Element nicht clickable ist, auch, und wir müssen das klickbare bleiben) Bis hier kann der Effekt durch reines CSS erzielt werden. Jedoch fehlt noch ein Merkmal .
5. Wenn der Benutzer eine Datei ausgewählt hat, das sichtbare, gefälschte Eingabefeld sollte zeigt den richtigen Pfad zu dieser Datei als normale würde. Es ist einfach eine Frage von Kopieren Sie den neuen Wert der auf die falsche Eingabe Feld, aber wir müssen JavaScript zu tun dies.

Weitere Details - http://www.quirksmode.org/dom/inputfile.html

Answer 3

Sie versuchen swfupload verwenden könnten, ein Open-Source-Projekt, das anstelle der Datei-Eingabe eine kleine Flash-Datei auf der Seite bettet ... können Sie CSS verwenden, um die Schaltfläche Stil, löst den Flash-Upload wie gewünscht aus.

Nachteil: Es kann schwierig zu arbeiten sein, und natürlich müssen Ihre Benutzer Flash haben.

Upside: mehrere Dateien sind gleichzeitig im Upload-Dialog wählbar!

Answer 4

können Sie einfach Ihren eigenen Dateieingabeknopf stylen. Setzen Sie einfach das CSS-Attribut Ihres Eingabeelements auf auf style="display:none" und behandeln Sie ein Klickereignis in JavaScript. weiterlesen: Using hidden file input elements using the click() method

EDIT: stellt sich heraus, dass dies aus Sicherheitsgründen nicht mehr funktioniert. ein kleiner hack ist es, den css style auf visibility:hidden zu setzen. Hier ist eine JSFiddle, wo ich meine <input> Feld irgendwo am Ende meiner Seite und triggern die OpenFileDialog mit einem <a> Element.

//html 
<input id="openFileDialog" type="file" id="files" name="files[]" accept=".json, .txt" /> 

//js 
$("#openFile").on("click", function() { 
    //throws an error if browser doesn't support file upload 
    checkFileApiCompatibility(); 

    //opens File Dialog 
    $("#openFileDialog").click(); 
    $("#openFileDialog").on('change', function(){ 
     openFile(this); 
    }); 
});