Stylen eines Eingabetyps = Schaltfläche "Datei"

734

Wie gestaltet man eine Eingabeschaltfläche type="file"?

Shivanand
quelle
Ich werde meine eigene Antwort hinzufügen, um es so zu machen, wie ich es getan habe ... aber hier ist ein Beispiel basierend auf Bootstrap, das helfen könnte. Geniuscarrier.com/…
Vishnu Narang

Antworten:

235

Das Stylen von Dateieingaben ist bekanntermaßen schwierig, da die meisten Browser das Erscheinungsbild von CSS oder Javascript nicht ändern.

Selbst die Größe der Eingabe reagiert nicht auf Folgendes:

<input type="file" style="width:200px">

Stattdessen müssen Sie das Größenattribut verwenden:

<input type="file" size="60" />

Für jedes anspruchsvollere Styling (z. B. Ändern des Aussehens der Schaltfläche "Durchsuchen") müssen Sie sich den kniffligen Ansatz ansehen, eine gestaltete Schaltfläche und ein Eingabefeld über die native Dateieingabe zu legen. Der Artikel, den rm bereits unter www.quirksmode.org/dom/inputfile.html erwähnt hat, ist der beste, den ich je gesehen habe.

AKTUALISIEREN

Obwohl es schwierig ist, ein <input>Tag direkt zu formatieren, ist dies mit Hilfe eines <label>Tags leicht möglich . Siehe Antwort unten von @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Jonathan Moffatt
quelle
7
Habe gerade eine jquery-Lösung gefunden, die auf diesem Skript basiert: blog.vworld.at/2008/08/21/…
mtness
1
Die Antwort von @TLK Ryan funktioniert im IE nicht, wenn versucht wird, Iframe-Uploads durchzuführen. Es gibt Ihnen einen Fehler bei der Zugriffsverweigerung. Für normale Uploads stimme ich jedoch zu, dass dies am einfachsten ist!
frostymarvelous
3
Eine viel einfachere Lösung als die von Quirksmode wird hier erklärt . Setzen Sie einfach diesen Link hierher, da diese Antwort im Grunde genommen sowieso nur eine Link-Antwort ist.
Joeytje50
10
Für alle, die an einem modernen Ansatz interessiert sind, würde ich empfehlen, diese Antwort zu prüfen . Es erfordert auch kein JavaScript wie einige der anderen Antworten.
Josh Crozier
3
@JoshCrozier hat eine wahnsinnig viel bessere Lösung gepostet. Sogar besser als Fake-Mouseclicking-Lösungen :)
Lodewijk
1017

Dafür benötigen Sie kein JavaScript! Hier ist eine browserübergreifende Lösung:

Siehe dieses Beispiel! - Es funktioniert in Chrome / FF / IE - (IE10 / 9/8/7)

Der beste Ansatz wäre, ein benutzerdefiniertes Beschriftungselement mit einem forAttribut an ein verstecktes Dateieingabeelement anzuhängen. (Das forAttribut des Labels muss mit dem des Dateielements übereinstimmen id, damit dies funktioniert.)

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Alternativ können Sie das Dateieingabeelement auch direkt mit einer Beschriftung versehen: (Beispiel)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

In Bezug auf das Styling verstecken Sie einfach 1 das Eingabeelement mit der Attributauswahl .

input[type="file"] {
    display: none;
}

Dann müssen Sie nur noch das benutzerdefinierte labelElement formatieren. (Beispiel) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 - Wenn Sie das Element mit ausblenden display: none, funktioniert es in IE8 und darunter nicht. Beachten Sie auch, dass die jQuery- Validierung versteckte Felder standardmäßig nicht validiert . Wenn eines dieser Dinge für Sie ein Problem darstellt, gibt es zwei verschiedene Methoden, um die Eingabe ( 1 , 2 ) auszublenden, die unter diesen Umständen funktioniert.

Josh Crozier
quelle
43
Ich habe jedoch eine Frage zu dieser Frage: Wie würden wir bei der Auswahl einer Datei vorgehen und dann den Dateinamen anzeigen?
Richlewis
17
Wie wird der Name der ausgewählten Datei angezeigt, wenn dies festgelegt display: noneist input[type=file]?
Sarthak Singhal
38
Tolle Lösung, aber Sie brauchen tatsächlich Javascript. Wenn Sie den Dateinamen anzeigen möchten, wie andere gefragt haben, müssen Sie einen Bereich zwischen der Beschriftung und der ausgeblendeten Eingabe hinzufügen: <span id = "file-selected"> </ span>. Aktualisieren Sie dann die Spanne des Änderungsereignisses: $ ('# file-upload'). Bind ('change', function () {var fileName = ''; fileName = $ (this) .val (); $ ('# Datei ausgewählt '). html (Dateiname);})
Sam
9
Sie sollten position: absolute; left: -99999remanstelle von display: noneaus Gründen der Barrierefreiheit verwenden. In den meisten Fällen lesen Screenreader keine Elemente, wenn sie mit der display: noneMethode ausgeblendet werden .
Kapsel
10
Ich bin sehr überrascht, dass niemand die Zugänglichkeit der Tastatur in Betracht gezogen hat. labelElemente sind im Gegensatz zu buttons und inputs nicht über die Tastatur zugänglich . Das Hinzufügen tabindexist keine Lösung, da der labelWille immer noch nicht ausgeführt wird, wenn er den Fokus hat und der Benutzer die Eingabetaste drückt. Ich habe dieses Problem gelöst, indem ich die Eingabe visuell ausgeblendet habe , damit sie weiterhin fokussiert werden kann, und sie dann :focus-withinauf dem labelübergeordneten Element verwendet habe
Oliver Joseph Ash
195

Befolgen Sie diese Schritte, um benutzerdefinierte Stile für Ihr Formular zum Hochladen von Dateien zu erstellen:

  1. Dies ist das einfache HTML-Formular (bitte lesen Sie die HTML-Kommentare, die ich hier unten geschrieben habe)

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
      <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
      <!-- this is your file input tag, so i hide it!-->
      <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
      <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
      <input type="submit" value='submit' >
    </form>
  2. Verwenden Sie dann dieses einfache Skript, um das Klickereignis an das Dateieingabe-Tag zu übergeben.

    function getFile(){
         document.getElementById("upfile").click();
    }

    Jetzt können Sie jede Art von Stil verwenden, ohne sich Gedanken darüber machen zu müssen, wie Standardstile geändert werden.

Ich weiß das sehr gut, weil ich anderthalb Monate lang versucht habe, die Standardstile zu ändern. Glauben Sie mir, es ist sehr schwierig, weil verschiedene Browser unterschiedliche Upload-Eingabe-Tags haben. Verwenden Sie dieses, um Ihre benutzerdefinierten Formulare zum Hochladen von Dateien zu erstellen. Hier ist der vollständige AUTOMATED UPLOAD-Code.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}
#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

Teshguru
quelle
6
@ user1053263 -> Danke für die Empfehlung. Hier habe ich ein sehr einfaches Java-Skript verwendet, ohne dass Frameworks wie Jquery oder PrototypeJS verwendet werden müssen.
Teshguru
7
Ich habe Probleme beim Senden des Formulars in IE9. Ich erhalte die Fehlermeldung "Zugriff verweigert", bei der versucht wird, das Formular über Javascript zu senden. Wenn ich über die Benutzeroberfläche auf die Schaltfläche "Senden" klicke, funktioniert es. Gibt es dafür eine Lösung?
Kevin
1
@kevin -> Bitte versuchen Sie event.preventDefault () nach document.myForm.submit (), ich habe die Änderung am obigen Code vorgenommen.
Teshguru
1
Funktioniert gut in Chrome, Firefox, Safari & Opera - aber nicht in IE9. In IE9 erhalte ich den gleichen Fehler "Zugriff wird verweigert" wie bei @Kevin - und manchmal nur einen stillen Fehler ohne Fehler.
Daveywc
10
In IE10 (und möglicherweise IE9 usw.) erhalten Sie "Zugriff verweigert" (oder keine Antwort von jQuery), wenn Sie versuchen, das Formular automatisch zu senden, nachdem Sie über Javascript auf die Schaltfläche zur Dateieingabe geklickt haben. Diese Methode dient also zum Stylen der Dateieingabeschaltfläche, solange der Benutzer noch das Formular sendet. Ich habe eine Weile gebraucht, um das zu finden, und ich sehe, dass andere das gleiche Problem haben. Weitere Informationen finden Sie unter stackoverflow.com/a/4335390/21579 .
Jeff Widmer
76

Blenden Sie es mit CSS aus und verwenden Sie eine benutzerdefinierte Schaltfläche mit $ (Selektor) .click (), um die Schaltfläche zum Durchsuchen zu aktivieren. Legen Sie dann ein Intervall fest, um den Wert des Dateieingabetyps zu überprüfen. Das Intervall kann den Wert für den Benutzer anzeigen, sodass der Benutzer sehen kann, was hochgeladen wird. Das Intervall wird gelöscht, wenn das Formular gesendet wird. [BEARBEITEN] Entschuldigung, ich war sehr beschäftigt, um diesen Beitrag zu aktualisieren. Hier ist ein Beispiel

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});
Ryan
quelle
7
Beachten Sie, dass, wenn Sie auf diese Weise verwenden, es im Internet Explorer brechen wird, weil es eine Sicherheitsausnahme ist.
Rejinderi
1
danke dem tipp. Wenn ich IE benutze, hat es normalerweise ein separates Layout zu allem anderen. HASSE IE. aber ich vereinfache alles im IE.
Ryan
1
Mit FF20 scheint $ ('# Dateityp'). Click () das Dialg "Datei auswählen" nicht aufzurufen - tatsächlich passiert nichts. Irgendwelche Ideen?
andig
2
Versuchen Sie es mit der Trigger-Methode in jquery. Auch .live wurde in der neuen jquery in .on () geändert
Ryan
1
Wenn Sie dieses Intervall festgelegt haben, an welchem ​​Punkt kann ich es löschen? sonst wird es ständig feuern
Dave Haigh
60

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Geige : http://jsfiddle.net/M7BXC/

Sie können Ihre Ziele auch ohne jQuery mit normalem JavaScript erreichen.

Jetzt ist das newBtn mit dem html_btn verknüpft und Sie können Ihr neues btn wie gewünscht gestalten: D.

Wykk
quelle
1
Nur neugierig, funktioniert es in jedem Browser der neuen Generation wie Firefox, IE, Opera, Safari, Chrome usw.?
Wh1T3h4Ck5
Dies ist die einfachste Lösung für mich! Zumindest in IE 9, Chrome 23 und FF 16 mit jQuery 1.7.2, also sollte es mit aktualisierten Versionen funktionieren.
Dani Bischof
Weiß jemand, wie man die .new_Btn ändert, falls der Benutzer ein Bild ausgewählt hat. Jetzt zeigt es nur die gleiche Klasse. Weiß jemand, wie man das verfolgt? Danke
Ando
2
@MehdiKaramosly funktioniert es sogar auf IE 6 - aber das gilt nur bis zu jQuery 1.x , jQuery 2.x + unterstützt keine alten IEs
jave.web
1
@Ando via Javascript / jQuery => der Wert der Dateieingabe ist leer oder enthält den lokalen Dateipfad => benutze das Ereignis change und teste auf val () :) siehe jsfiddle.net/ZrBPF
jave.web
55

Alle Rendering-Engines generieren automatisch eine Schaltfläche, wenn eine <input type="file">erstellt wird. In der Vergangenheit war diese Schaltfläche nicht stilisierbar. Trident und WebKit haben jedoch Hooks durch Pseudoelemente hinzugefügt.

Dreizack

Ab IE10 kann die Dateieingabeschaltfläche mit dem Pseudoelement gestaltet werden ::-ms-browse. Grundsätzlich können alle CSS-Regeln, die Sie auf eine reguläre Schaltfläche anwenden, auf das Pseudoelement angewendet werden. Zum Beispiel:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Dies wird in IE10 unter Windows 8 wie folgt angezeigt:

Dies wird in IE10 unter Windows 8 wie folgt angezeigt:

WebKit

WebKit bietet einen Hook für seine Dateieingabeschaltfläche mit dem ::-webkit-file-upload-buttonPseudoelement. Auch hier kann so ziemlich jede CSS-Regel angewendet werden, daher funktioniert das Trident-Beispiel auch hier:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Dies wird in Chrome 26 unter OS X wie folgt angezeigt:

Dies wird in Chrome 26 unter OS X wie folgt angezeigt:

Anselm
quelle
Für Gecko-basierte Programme wie Firefox gibt es keine speziellen Styling-Möglichkeiten.
Anselm
2
In Ihrer Antwort antworten Sie mit CSS, wie Sie das Wort "Keine Datei ausgewählt" im Tag <input type = file> ausblenden können. Bitte kommentieren Sie mich.
user2086641
Ich habe keine Ahnung, sorry
Anselm
1
Quelle: tjvantoll.com/2013/04/15/…
Anselm
1
Für den Fall, dass jemand mit Stilen spielen möchte, habe ich hier eine jsfidde hinzugefügt: jsfiddle.net/peter_drinnan/r0gq6kw2
Peter Drinnan
26

Wenn Sie Bootstrap 3 verwenden, hat dies bei mir funktioniert:

Siehe http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

Welches erzeugt die folgende Datei-Eingabe-Schaltfläche:

Beispielschaltfläche

Im Ernst, besuchen Sie http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

JDawg
quelle
2
Dadurch bleibt die Drag & Drop-Funktionalität erhalten, was großartig ist :) Die meisten Antworten akzeptieren keine abgelegten Dateien.
A1rPun
25

Arbeitsbeispiel hier mit nativer Drag & Drop-Unterstützung: https://jsfiddle.net/j40xvkb3/

Wenn Sie eine Dateieingabe gestalten, sollten Sie keine der nativen Interaktionen unterbrechen, die die Eingabe bietet .

Der display: noneAnsatz unterbricht die native Drag & Drop-Unterstützung.

Um nichts zu beschädigen, sollten Sie den opacity: 0Ansatz für die Eingabe verwenden und ihn mit einem relativen / absoluten Muster in einem Wrapper positionieren.

Mit dieser Technik können Sie einfach eine Klick- / Ablagezone für den Benutzer formatieren und eine benutzerdefinierte Klasse in Javascript für dragenterEreignisse hinzufügen , um Stile zu aktualisieren und dem Benutzer ein Feedback zu geben, damit er sehen kann, dass er eine Datei löschen kann.

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Hier ist ein Arbeitsbeispiel (mit zusätzlichem JS zur Behandlung von dragoverEreignissen und abgelegten Dateien).

https://jsfiddle.net/j40xvkb3/

Hoffe das hat geholfen!

Kevcha
quelle
danke für den Beitrag, wie funktioniert das, wenn multiple = "multiple" Attribut hinzugefügt wird, ich habe 2 Bilder gezogen, aber den Pfad nur für das erste gesehen
PirateApp
Sie haben hier Code verpasst. Es gibt mehr auf der Geige. Welche Bibliothek?
Strg-Alt-Delor
Es gibt nur etwas Javascript in der Geige mit jQuery, um Dateien anzuzeigen, die gelöscht wurden. Das ist alles
Kevcha
Nachdem diese Lösung implementiert und weiter getestet wurde, scheint sie auch in Edge nicht zu funktionieren.
ChrisA
1
Ah ok, ich habe den Wrapper mit der relativen Position in Ihrer Antwort verpasst - Mein schlechtes. Wenn die Eingabe unterhalb der Bildschirmabmessungen liegt, versucht der Browser, einen Bildlauf durchzuführen, und verschiebt dabei den Bildlaufcontainer auf der Seite nach oben. Hier ist eine Demonstration: stackblitz.com/edit/input-file-overflow?file=style.css (nur nicht genau, wie Position absolut die Ursache des Verhaltens ist)
Tom
23

Ich kann es mit reinem CSS unter Verwendung des folgenden Codes tun . Ich habe Bootstrap und Font-Awesome verwendet.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

Karthik
quelle
21
 <label>
    <input type="file" />
 </label>

Sie können Ihren Eingabetyp = "Datei" in eine Beschriftung für die Eingabe einschließen. Gestalten Sie das Etikett nach Ihren Wünschen und verbergen Sie die Eingabe mit Anzeige: keine;

JGuo
quelle
Eine Alternative könnte gist.github.com/barneycarroll/5244258 oder jsfiddle.net/4cwpLvae (funktioniert in IE11) sein
surfmuggle
12

Hier ist eine Lösung, die das <input type="file" />Element nicht wirklich formatiert, sondern ein <input type="file" />Element über anderen Elementen verwendet (die gestylt werden können). Das <input type="file" />Element ist daher nicht wirklich sichtbar, daher besteht die allgemeine Illusion in einem gut gestalteten Steuerelement zum Hochladen von Dateien.

Ich bin kürzlich auf dieses Problem gestoßen, und trotz der Fülle von Antworten auf Stack Overflow schien keine wirklich zu passen. Am Ende habe ich dies angepasst, um eine einfache und elegante Lösung zu erhalten.

Ich habe dies auch auf Firefox, IE (11, 10 & 9), Chrome und Opera, iPad und einigen Android-Geräten getestet.

Hier ist der JSFiddle-Link -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

Hoffe das hilft!!!

Satwik Nadkarny
quelle
2
Eine genial clevere Lösung für diese schändlichen Datei-Upload-Styling-Spielereien.
rmcsharry
Das Beste. Perfekt!!
Karra
11

Dies ist mit jquery einfach. Um ein Codebeispiel für Ryans Vorschlag mit einer geringfügigen Änderung zu geben.

Grundlegendes HTML:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Stellen Sie sicher, dass Sie das Styling für die Eingabe festlegen, wenn Sie bereit sind: opacity: 0 Sie können es nicht festlegen, display: noneda es anklickbar sein muss. Sie können es aber auch unter der Schaltfläche "Neu" positionieren oder unter etwas anderem mit Z-Index einfügen, wenn Sie dies bevorzugen.

Richten Sie eine Abfrage ein, um auf die reale Eingabe zu klicken, wenn Sie auf das Bild klicken.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

Jetzt funktioniert Ihre Schaltfläche. Schneiden Sie den Wert einfach aus und fügen Sie ihn ein, wenn Sie ihn ändern.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Tah dah! Möglicherweise müssen Sie val () auf etwas Bedeutenderes analysieren, aber Sie sollten fertig sein.

TLK
quelle
1
Dies schlägt mit FF11 fehl - Grund: Da Sie die Größe des Eingabefelds (nur mithilfe der HTML-Größe) und der Schaltfläche (Sie können die Höhe mithilfe von CSS festlegen) nicht genau beeinflussen können, können Sie das sichtbare Eingabefeld, das größer ist als das ursprüngliche FF, uns zur Verfügung stellen Sie haben einen sehr großen blinden Bereich - Standpunkt des Benutzers: In den meisten Fällen wird er sich beschweren, dass das Hochladen nicht funktioniert, wenn er darauf
klickt
2
Gute Idee, aber das funktioniert nicht im IE. $ ('# the_real_file_input'). click () löst einen geöffneten Dialog aus, aber die Datei wird nicht in ein Formular ausgewählt und der Upload schlägt fehl.
Tomas
11

Legen Sie die Schaltfläche zum Hochladen von Dateien über Ihre nette Schaltfläche oder Ihr Element und verstecken Sie sie.

Sehr einfach und funktioniert in jedem Browser

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

Stile

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}
Tigran Babajanyan
quelle
8

SICHTBARKEIT: versteckter Trick

Normalerweise mache ich den visibility:hiddenTrick

Das ist mein gestylter Knopf

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

Dies ist die Schaltfläche Eingabetyp = Datei. Beachten Sie die visibility:hiddenRegel

<input type="file" id="upload" style="visibility:hidden;">

Dies ist das JavaScript-Bit, um sie zusammenzukleben. Es klappt

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>
Gianluca Ghettini
quelle
1
Sie können die click () -Methode nicht verwenden, um ein Ereignis für eine Eingabetypdatei auszulösen. Die meisten Browser erlauben aus Sicherheitsgründen keine
Mahi
sogar mit jquery? Ist das korrekt? wie würdest du es stattdessen machen
Gianluca Ghettini
style="visibility:hidden"ist zu lang, einfach benutzen hidden. Funktioniert auch click()für alle Browser und es gibt derzeit keinen sehr zuverlässigen Sicherheitsgrund. Auf allen Geräten ist dies der legitime Weg und @Gianluca für die klassische Verwendung von jQuerytrigger()
Thielicious
1
Dies ist genau die Lösung, die ich hinzufügen wollte! Es funktioniert und Sie können es genau so anzeigen, wie Sie möchten. Funktioniert mit Chrome, wird andere ausprobieren.
markthewizard1234
7

Die einzige Möglichkeit, die ich mir vorstellen kann, besteht darin, die Schaltfläche mit Javascript zu finden, nachdem sie gerendert wurde, und ihr einen Stil zuzuweisen

Sie können sich auch diesen Artikel ansehen

römisch m
quelle
Reines CSS, kein JavaScript, funktioniert in allen Browsern bis hin zu ie7 - großartig!
Simon Steinberger
7
<input type="file" name="media" style="display-none" onchange="document.media.submit()">

Normalerweise würde ich einfaches Javascript verwenden, um das Dateieingabe-Tag anzupassen. Ein verstecktes Eingabefeld, auf Knopfdruck, Javascript ruft das versteckte Feld auf, einfache Lösung ohne CSS oder JQuery.

<button id="file" onclick="$('#file').click()">Upload File</button>
user2086641
quelle
1
Sie können die click()Methode nicht verwenden , um ein Ereignis für eine Eingabetypdatei auszulösen. Die meisten Browser lassen aus Sicherheitsgründen keine zu.
Mahi
6

Hier verwenden wir eine Spanne, um die Eingabe einer Typdatei auszulösen, und haben diese Spanne einfach angepasst , damit wir auf diese Weise jedes Styling hinzufügen können.

Beachten Sie, dass wir ein Eingabe-Tag mit der Option Sichtbarkeit: versteckt verwenden und es in der Spanne auslösen.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}
<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Referenz

Abdallah Okasha
quelle
5

Dies ist eine gute Möglichkeit, dies beim Hochladen von Material- / Winkeldateien zu tun. Sie können dasselbe mit einer Bootstrap-Schaltfläche tun.

Hinweis: Ich habe <a>stattdessen verwendet, <button>damit die Klickereignisse in die Luft sprudeln.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>
Robert King
quelle
1
Dies funktioniert hervorragend in Winkel 2+. Ich bin mir nicht sicher, warum es nicht gewählt wurde. Wenn Sie Angular verwenden, ist dies die einfachste verfügbare Lösung.
AndrewWhalan
4

NUR CSS

Verwenden Sie dies sehr einfach und EINFACH

Html:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

CSS:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}
Balvant Ahir
quelle
4

Vielleicht viele Markisen. Aber ich mag das in reinem CSS mit Fa-Buttons:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}
<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Geige: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

Johan Hoeksma
quelle
4

Lassen Sie sich nicht von "großartigen" Nur-CSS-Lösungen täuschen, die tatsächlich sehr browserspezifisch sind oder die die gestaltete Schaltfläche über der realen Schaltfläche überlagern oder die Sie dazu zwingen, einen <label>anstelle eines <button>oder eines anderen solchen Hacks zu verwenden . JavaScript ist erforderlich, damit es für den allgemeinen Gebrauch funktioniert. Bitte studieren Sie, wie Google Mail und DropZone es tun, wenn Sie mir nicht glauben.

Gestalten Sie einfach eine normale Schaltfläche, wie Sie möchten, und rufen Sie dann eine einfache JS-Funktion auf, um ein verstecktes Eingabeelement zu erstellen und mit Ihrer gestalteten Schaltfläche zu verknüpfen.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

Beachten Sie, wie der obige Code ihn jedes Mal neu verknüpft, wenn der Benutzer eine Datei auswählt. Dies ist wichtig, da "onchange" nur aufgerufen wird, wenn der Benutzer den Dateinamen ändert. Aber Sie möchten die Datei wahrscheinlich jedes Mal abrufen, wenn der Benutzer sie bereitstellt.

personal_cloud
quelle
1
Um genau zu sein, labelfunktioniert der Ansatz, außer dass der ausgewählte Dateiname oder Pfad nicht angezeigt werden kann. Das ist also notwendigerweise das einzige Problem, das JS lösen muss.
Hassan Baig
4

Lösung für mehrere Dateien mit konvertiertem Dateinamen

Bootstrap BEISPIEL

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. JS mit jQuery:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS ohne jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});
ChrisRob
quelle
3

Hier ist eine Lösung, die auch den ausgewählten Dateinamen anzeigt: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }
Caleb
quelle
Wie wird nur der Dateiname und nicht der fakepathPfad angezeigt ?
Hassan Baig
3

Diese Woche musste ich auch die Schaltfläche anpassen und den ausgewählten Dateinamen daneben anzeigen. Nachdem ich einige der obigen Antworten gelesen hatte (danke übrigens), kam ich auf die folgende Implementierung:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript (eckig)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

Grundsätzlich arbeite ich mit ng-file-upload lib. Angular-weise binde ich den Dateinamen an meinen $ scope und gebe ihm den Anfangswert 'Keine Datei ausgewählt'. Außerdem binde ich die Funktion onFileSelect () an Wenn eine Datei ausgewählt wird, erhalte ich den Dateinamen mithilfe der ng-upload-API und weise ihn der Datei $ scope.filename zu.

liron_hazan
quelle
3

Simulieren Sie einfach einen Klick auf die, <input>indem Sie die trigger()Funktion verwenden, wenn Sie auf einen Stil klicken <div>. Ich habe meine eigene Schaltfläche aus a erstellt <div>und dann inputbeim Klicken auf meine einen Klick auf ausgelöst <div>. Auf diese Weise können Sie Ihre Schaltfläche beliebig erstellen, da es sich um eine Schaltfläche handelt, <div>die einen Klick auf Ihre Datei simuliert <input>. Dann verwenden Sie display: noneauf Ihrem <input>.

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});
James Marquez
quelle
3

Der beste Weg ist, das Pseudoelement: after oder: before als Element über der de-Eingabe zu verwenden. Gestalten Sie dann dieses Pseudoelement nach Ihren Wünschen. Ich empfehle Ihnen, als allgemeinen Stil für alle Eingabedateien Folgendes zu tun:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}
Despertaweb
quelle
3

Der beste Weg, den ich gefunden habe, ist, ihn input type: filedann einzustellen display: none. Gib es ein id. Erstellen Sie eine Schaltfläche oder ein anderes Element, mit dem Sie die Dateieingabe öffnen möchten.

Fügen Sie dann einen Ereignis-Listener hinzu (Schaltfläche), der beim Klicken einen Klick auf die ursprüngliche Dateieingabe simuliert. Klicken Sie auf eine Schaltfläche mit dem Namen "Hallo", um ein Dateifenster zu öffnen.

Beispielcode

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

Javascript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })
Taio
quelle
2

CSS kann hier viel ... mit ein wenig Trick ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: reference :: http://site-o-matic.net/?viewpost=19

-Abtei

Abtei
quelle
2

Ich habe eine sehr einfache Methode gefunden, um die Datei-Schaltfläche auf ein Bild umzustellen. Sie beschriften einfach ein Bild und platzieren es oben auf der Datei-Schaltfläche.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

Wenn Sie auf das beschriftete Bild klicken, wählen Sie die Schaltfläche Datei.

D-Inventor
quelle
2

Nur dieser Ansatz bietet Ihnen die gesamte Flexibilität! ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

Javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

Dadurch wird die Schaltfläche für die Eingabedatei ausgeblendet, aber unter der Haube wird auf eine andere normale Schaltfläche geklickt, die Sie offensichtlich wie jede andere Schaltfläche gestalten können. Dies ist die einzige Lösung ohne Nachteile, abgesehen von einem nutzlosen DOM-Knoten. Dank display:none;der Eingabetaste wird kein sichtbarer Platz im DOM reserviert.

(Ich weiß nicht mehr, wem ich dafür Requisiten geben soll. Aber ich habe diese Idee von irgendwo hier auf Stackoverflow.)

Codepleb
quelle