Gestalten einer Eingabe type="file"

Question

Ich habe an verschiedenen Stellen darüber gelesen.

Ich habe die hier beschriebene Methode ausprobiert: http://www.quirksmode.org/dom/inputfile.html

Ich konnte es nicht zum Laufen bringen. Also habe ich eine CSS/HTML-Methode ausprobiert und es funktioniert wunderbar in Firefox, Chrome, Safari und Opera (alle aktuellen Versionen), aber nicht in (Sie haben es erraten) IE8.

Es sieht gut aus, aber wenn man es einfach anklickt, funktioniert es nicht. Wenn Sie doppelt klicken, funktioniert es.

Haben Sie eine Idee, wie man das mit einem einzigen Klick hinbekommt?

Derzeit verwende ich bedingte IE-Kommentare, um Benutzern mit IE mitzuteilen, dass sie auf die Auswahlschaltfläche doppelt klicken sollen. Die Website befindet sich derzeit im Entwurfsstadium und ist für die Benutzer noch nicht live und ich möchte dieses Problem lösen, bevor sie live geht, wenn möglich.

Answer 1

Eine gute Lösung, die es Ihnen ermöglicht, einen einzigen Klick zu verwenden, ist die Verwendung eines Beschriftungselements und seiner Eigenschaft "for", die es Ihnen ermöglicht, es mit dem Eingang zu verbinden. Ein weiteres wichtiges Element dieser Lösung ist die Anwendung von filter:alpha(opacity=0) auf das Eingabeelement.

HTML:

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS:

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }

Answer 2

Ich habe eine Lösung, mit der Sie die Schaltfläche so gestalten können, wie Sie es wünschen, und die auch in allen Browsern mit einem Klick funktioniert.

Grundsätzlich erstellen Sie ein div und geben Sie ihm eine Klasse oder ID, für Beispiele nennen wir dies "outer_div".

Dann platzieren Sie Ihre Datei-Input innerhalb der "outer_div" und geben Sie ihm auch eine ID, für dieses Beispiel nennen wir es "file_input_name".

Als nächstes kommt das CSS...

Für das "outer_div" geben Sie ihm die folgenden Eigenschaften

    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }

Vergewissern Sie sich, dass Ihre Schaltfläche die gleichen Breiteneigenschaften hat, damit dies funktioniert.

Als nächstes das CSS für file_input_name:

  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }

Damit sollte es klappen. Grundsätzlich, was passiert, ist, dass wir die Dateieingabe so platzieren, dass die Schaltfläche "Durchsuchen" über Ihrem Hintergrundbild ist, anstatt dort, wo die Datei-URL ist.

Ich habe das selbst gemacht und es funktioniert im IE und Firefox/Safari/Chrome.

Lassen Sie mich wissen, wie Sie vorankommen oder ob Sie weitere Hilfe benötigen.

Answer 3

Ich glaube, ich habe zwei Lösungen für Ihr Problem gefunden. Sie verwenden: filter:alpha(opacity: 0) zu Ihrem .file Klasse, wodurch die eigentliche Schaltfläche "Durchsuchen...", die Sie normalerweise in Upload-Steuerelementen sehen, ausgeblendet wird.

Die erste Lösung wäre, eine Bedingung zu verwenden, um das CSS zu setzen, das Ihr schickes "Select"-Bild durch die normale, aber gestylte "Browse"-Schaltfläche ersetzt, wenn der Benutzer den IE verwendet.

Die zweite Möglichkeit wäre, mit der Größe der FileAttachment eingeben, so dass die verborgene Schaltfläche "Durchsuchen..." an die Stelle des Bildes "Auswählen" passen würde. Von dort aus müssen Sie nur noch sicherstellen, dass die z-index Eigenschaft der Schaltfläche höher ist als die des Bildes.

Lassen Sie mich wissen, ob diese Lösungen Ihren Bedürfnissen entsprechen.

D

Answer 4

Der Grund, warum sie doppelt klicken müssen, ist der "Textbereich".

Das erste Bild hier zeigt ein IE8-Upload-Steuerelement. Beachten Sie, dass es ein Textfeld und eine Schaltfläche gibt. Der Benutzer klickt einfach auf die Schaltfläche oder klickt doppelt auf das Textfeld, um die Schaltfläche aufzurufen.

[ arg, sorry, mein Ansehen ist nicht hoch genug für Bilder ]

Wenn Sie das überlagern, überschneidet sich der Textbereich mit dem, was Sie mit einem einzigen Klick erreichen wollen, so dass ein Doppelklick erforderlich ist.

Das nächste Bild ist das gleiche Datei-Upload-Steuerelement ohne Deckkraft, hat eine Schaltfläche über ihm, und hat einen Umriss von IE8's DOM-Inspektor. Wenn ich den rechten Teil des blauen Rechtecks klicken ein einfacher Klick funktioniert, überall sonst erfordert einen Doppelklick. Beachten Sie auch die Textbearbeitung Caret überlagert von der Datei-Input ontop die Schaltfläche.

[Bild ausgelassen]

Die Lösung besteht darin, die Größe/Position der versteckten Dateieingabe zu ändern, um die Schaltfläche "Durchsuchen" an die gewünschte Stelle zu setzen.

Answer 5

Mit einigen Bootstrap Magie, ich habe es getan, ist super einfach.

Ok, nachdem ich den Link zu Bootstrap css in Ihrem Kopfetikett, tun Sie dies:

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

Dadurch wird eine Eingabedatei erstellt, die durch das Bootstrap-CSS gestylt wird.

Und nun der schwierige Teil:

  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Und das war's. Jetzt haben Sie eine funktionale Schaltfläche (Eingabedatei) mit Stil.

Ich fand dieser Artikel weil ich das gleiche Problem hatte, können Sie es für weitere Informationen überprüfen.