Was ist der beste Weg, um die Datei Schaltfläche Durchsuchen in HTML zu ersetzen?

StackOverflow https://stackoverflow.com/questions/108149

  •  01-07-2019
  •  | 
  •  

Frage

Ich weiß, dass es möglich ist die Schaltfläche Durchsuchen ersetzen, die in HTML erzeugt wird, wenn Sie input Tag mit type="file verwenden.

Ich bin nicht sicher, was der beste Weg ist, also wenn jemand Erfahrung mit dieser hat bitte bei.

War es hilfreich?

Lösung

Der beste Weg ist, um die Datei Eingabekontrolle fast unsichtbar (durch eine sehr niedrige Trübung geben zu machen - nicht tun „ Sichtbarkeit: versteckt “ oder „ Anzeige:. kein ") und absolut Position etwas unter ihn - mit einem niedrigen z-index

Auf diese Weise wird die tatsächliche Kontrolle nicht sichtbar sein, und was auch immer Sie setzen unter es wird durchscheinen. Da aber die Kontrolle über dieser Taste positioniert ist, wird es noch die Click-Ereignisse erfassen (dies ist, warum Sie Opazität verwenden möchten, nicht Sichtbarkeit oder Anzeige - Browser das Element unclickable machen, wenn Sie diejenigen, es zu verbergen verwenden).

Dieser Artikel geht auf die Technik im Detail.

Andere Tipps

Browser weiß nicht wirklich wie Sie Kampf mit Datei-Eingängen, aber es ist möglich, dies zu tun. Ich habe ein paar Techniken zu sehen, aber die einfachste ist unbedingt die Datei Eingabeposition über, was Sie wollen als Schaltfläche verwenden, und legen Sie die Deckkraft auf Null oder nahe Null. Dies bedeutet, dass, wenn der Benutzer klickt auf dem Bild (oder was auch immer Sie unter dort haben) sie tatsächlich auf der unsichtbaren Schaltfläche Durchsuchen klicken.

Zum Beispiel: 

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Wenn Sie nichts dagegen haben mit Hilfe von Javascript Sie die opasity der Datei-Eingang auf 0 gesetzt ist, setzen Sie den gestylten Kontrolle auf über Z-Index und clickevents aus Ihrer Schaltfläche, um die Datei-Eingang zu senden. Sehen Sie hier für die Technik: http://www.quirksmode.org/dom/inputfile.html

Dies ist technisch nicht möglich, aus Sicherheitsgründen, so kann der Benutzer nicht die Irre geführt werden.

Es gibt jedoch ein paar Abhilfen - werfen Sie einen Blick auf http: // www. quirksmode.org/dom/inputfile.html für ein Beispiel.

Für das Protokoll, ist diese Frage bereits gestellt hier (wo ich die gleiche Antwort gegeben haben).

Sie können ein Flash-Uploader wie SWFUpload , dies zu tun, wie gut.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top