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

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

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 ¹ 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;
}

¹ - 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.

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>

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;
    });
});

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.

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:

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:

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:

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

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!

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>

 <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;

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!!!

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.

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;
}

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>

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

<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>

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

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>

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;
}

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/

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.

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;
  });
});

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; }

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.

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");
});

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;
}

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")
    })

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

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.

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.)