it-swarm.com.de

Styling eines Eingabetyps = Schaltfläche "Datei"

Wie formatieren Sie eine Eingabeschaltfläche type="file"?

647
Shivanand

Die Eingabe von Styling-Dateien 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 size-Attribut verwenden:

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

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

196

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

Siehe dieses Beispiel! - Funktioniert in Chrome/FF/IE IE10/9/8/7)

Der beste Ansatz wäre, ein benutzerdefiniertes Beschriftungselement mit einem for -Attribut an ein verstecktes Dateieingabeelement anzuhängen. (Das Attribut for des Etiketts muss mit dem id des Dateielements übereinstimmen, 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 Sachen Styling einfach verstecken1 das Eingabeelement mit dem Attributselektor .

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

Dann müssen Sie nur noch das benutzerdefinierte label -Element formatieren. (Beispiel) .

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

1 - Beachten Sie, dass das Ausblenden des Elements mit display: none in IE8 und darunter nicht möglich ist. Beachten Sie auch, dass jQuery validate keine ausgeblendeten Felder validiert standardmäßig ist. Wenn eines dieser Dinge ein Problem für Sie ist, gibt es zwei verschiedene Methoden, um die Eingabe auszublenden ( 1 , - 2 ), die unter diesen Umständen funktionieren.

883
Josh Crozier

führen Sie die folgenden Schritte aus, um benutzerdefinierte Stile für Ihr Datei-Upload-Formular 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 Click-Ereignis an das Datei-Input-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 Sie die Standardstile ändern.

Ich weiß das sehr gut, weil ich anderthalb Monate lang versucht habe, die Standardstile zu ändern. Glauben Sie mir, es ist sehr schwer, weil verschiedene Browser unterschiedliche Upload-Input-Tags haben. Verwenden Sie diese also, um Ihre benutzerdefinierten Datei-Upload-Formulare 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>
183
teshguru

Verstecke es mit CSS und benutze eine benutzerdefinierte Schaltfläche mit $ (Selektor). Klicke (), um die Durchsuchen-Schaltfläche zu aktivieren. Stellen Sie dann ein Intervall ein, 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 und wollte diesen Beitrag 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;
    });
});
74
Ryan

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

Fiddle : 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 so gestalten, wie Sie es möchten: D

59
Wykk

Alle Rendering-Engines generieren automatisch eine Schaltfläche, wenn ein <input type="file"> erstellt wird. In der Vergangenheit war dieser Knopf völlig unanpassbar. Trident und WebKit haben jedoch Hooks durch Pseudoelemente hinzugefügt.

Dreizack

Ab IE10 kann die Dateieingabeschaltfläche mit dem Pseudoelement ::-ms-browse gestaltet werden. 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:

This displays as follows in IE10 on Windows 8:

WebKit

WebKit stellt einen Hook für seine Dateieingabeschaltfläche mit dem Pseudoelement ::-webkit-file-upload-button bereit. 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 folgendermaßen angezeigt:

This displays as follows in Chrome 26 on OS X:

53
Anselm

Ich bin in der Lage, es mit reines CSS unter Verwendung des folgenden Codes zu 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>
22
Karthik

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>

Wodurch die folgende Dateieingabeschaltfläche erzeugt wird:

Example button

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

22
JDawg
 <label>
    <input type="file" />
 </label>

Sie können Ihren Eingabetyp = "Datei" in eine Bezeichnung für die Eingabe einschließen. Gestalten Sie die Beschriftung wie gewünscht und blenden Sie die Eingabe mit display aus: none;

20
JGuo

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

Wenn Sie eine Dateieingabe formatieren , sollten Sie keine der nativen Interaktionen unterbrechen, die die Eingabe bereitstellt .

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

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

Mit dieser Technik können Sie einfach eine Click/Drop-Zone für den Benutzer erstellen und eine benutzerdefinierte Klasse in Javascript für das Ereignis dragenter hinzufügen, um Stile zu aktualisieren und dem Benutzer ein Feedback zu geben, damit er sieht, 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 funktionierendes Beispiel (mit zusätzlichem JS zur Behandlung von dragover -Ereignissen und abgelegten Dateien).

https://jsfiddle.net/j40xvkb3/

Hoffe das hat geholfen!

19
kevcha

Mit jquery ist das ganz einfach. Um ein Codebeispiel für den Vorschlag von Ryan mit einer geringfügigen Änderung anzugeben.

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 display: none nicht festlegen, da es anklickbar sein muss. Sie können es aber auch unter der Schaltfläche "Neu" platzieren oder unter etwas anderem mit Z-Index einfügen, wenn Sie dies vorziehen.

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 Taste. Schneiden Sie einfach den Wert 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 Bedeutsameres analysieren, aber Sie sollten alle Einstellungen vornehmen.

11
TLK

SICHTBARKEIT: versteckter TRICK

Normalerweise wähle ich den Trick visibility:hidden

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:hidden -Regel

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

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

Ich bin vor kurzem auf dieses Problem gestoßen, und trotz der Fülle von Antworten auf Stack Overflow schien keines wirklich zu der Rechnung zu passen. Am Ende habe ich das 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!!!

8
Satwik Nadkarny

ich kann mir nur vorstellen, den button mit javascript zu finden, nachdem er gerendert wurde, und ihm einen stil zuzuweisen

sie könnten sich auch diese Beschreibung ansehen

7
roman m
<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 nennt das versteckte Feld, eine einfache Lösung ohne CSS oder jede Menge JQuery.

<button id="file" onclick="$('#file').click()">Upload File</button>
7
user2086641

Hier verwenden wir einen Span, um die Eingabe der Typdatei auszulösen, und haben wir diesen Span einfach angepasst , damit wir auf diese Weise jedes Styling hinzufügen können.

Beachten Sie , dass wir das Eingabe-Tag mit der Option „Visibility: Hidden“ verwenden und es im Span 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

5
Abdallah Okasha

Platzieren Sie die Schaltfläche zum Hochladen von Dateien über Ihrer Nice-Schaltfläche oder Ihrem Nice-Element und verbergen 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;
}
5

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

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

4
Johan Hoeksma

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;
}
4
Balvant Ahir

Hier ist eine Lösung, die auch den gewä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; }
3
Caleb

Dies ist eine gute Möglichkeit, dies mit dem Hochladen von Material-/angular-Dateien zu tun. Sie können dies auch mit der Schaltfläche bootstrap tun.

Hinweis Ich habe <a> anstelle von <button> verwendet. Dadurch können die Klickereignisse in die Luft springen.

<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>
3
robert king

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 (Angular)

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 binde ich den Dateinamen an meinen $ scope und gebe ihm den Anfangswert 'Keine Datei ausgewählt'. Außerdem binde ich die Funktion onFileSelect () an Mein Gültigkeitsbereich Wenn eine Datei ausgewählt wird, erhalte ich den Dateinamen mithilfe der ng-upload-API und ordne ihn dem Dateinamen $ scope.filename zu.

3
lironn

Lassen Sie sich nicht von "großartigen" Nur-CSS-Lösungen täuschen, die tatsächlich sehr browserspezifisch sind oder die gestaltete Schaltfläche über der tatsächlichen Schaltfläche überlagern oder die Sie zwingen, einen <label> anstelle eines <button> oder eines anderen zu verwenden so ein Hack. JavaScript IS erforderlich, damit es für den allgemeinen Gebrauch funktioniert. Bitte lesen Sie, wie Google Mail und DropZone es machen, 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 nach jeder Auswahl einer Datei erneut verknüpft. Dies ist wichtig, da "onchange" nur aufgerufen wird, wenn der Benutzer den Dateinamen ändert. Wahrscheinlich möchten Sie die Datei jedoch jedes Mal abrufen, wenn der Benutzer sie bereitstellt.

3
personal_cloud

cSS kann hier viel tun ... 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

2
Abbey

Ich habe eine sehr einfache Methode gefunden, um die Dateischaltflä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 Datei-Schaltfläche.

2
D-Inventor

Der beste Weg ist, das Pseudoelement: after oder: before als Element zu verwenden, um die de-Eingabe zu überschreiben. Gestalten Sie dann das 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;
}
1
Despertaweb

Hier ist eine einfache CSS-Lösung, die einen konsistenten Zielbereich erstellt und es Ihnen ermöglicht, Ihre Faux-Elemente nach Ihren Wünschen zu gestalten.

Die Grundidee ist folgende:

  1. Haben Sie zwei "gefälschte" Elemente (eine Texteingabe/einen Link) als Geschwister für Ihre echte Dateieingabe. Positionieren Sie sie unbedingt so, dass sie genau über Ihrem Zielbereich liegen.
  2. Wickeln Sie Ihre Dateieingabe mit einem div. Setzen Sie den Überlauf auf "Ausgeblendet" (damit die Dateieingabe nicht überläuft) und stellen Sie genau die Größe ein, die Sie als Zielbereich festlegen möchten.
  3. Setzen Sie die Deckkraft für die Dateieingabe auf 0, damit sie ausgeblendet, aber noch anklickbar ist. Geben Sie eine große Schriftgröße ein, damit Sie auf alle Bereiche des Zielbereichs klicken können.

Hier ist die Jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>
1
Kerry Liu

Eine wirklich clevere Lösung mit jQuery, die sowohl in allen älteren als auch in den neuen Browsern funktioniert, fand ich hier . Es kümmert sich über die Schaltfläche zum Durchsuchen der Dateien um alle Probleme beim Stylen und Klicken (). Ich habe eine einfache Javascript-Version erstellt: Fiddle Die Lösung ist so einfach wie genial: Machen Sie die Dateieingabe unsichtbar und platzieren Sie sie mit einem Stück Code unter dem Mauszeiger.

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}
1
Michel

Diese Antworten sind nett und funktionieren alle für sehr spezielle Anwendungsfälle. Das heißt, sie haben eine Meinung.

Hier ist eine Antwort, die nichts voraussetzt, aber funktioniert, egal wie Sie sie ändern. Sie können das Design mit CSS ändern, Javascript hinzufügen, um bei Änderungen möglicherweise einen Dateinamen anzuzeigen, usw. Es funktioniert immer noch.

Code:

Hier ist das Kern-CSS

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

und der Kern html:

<div class="file-input">
  <input type="file"/>
</div>

Wie Sie sehen, erzwingen wir, dass alle Zeigerereignisse (Klicks), die für das Element .file-input oder eines seiner untergeordneten Elemente auftreten, als Proxy für die Dateieingabe verwendet werden. Dies liegt daran, dass die Dateieingabe absolut positioniert ist und immer die Breite/Höhe des Containers einnimmt. Sie können es daher an Ihre Bedürfnisse anpassen. Formatieren Sie den Wrapper in eine Schaltfläche, verwenden Sie einige Js, um den Dateinamen bei Auswahl anzuzeigen, usw. Solange der oben genannte Kerncode intakt bleibt, bricht nichts zusammen.

Wie Sie in der Demo sehen werden, habe ich ein span mit dem Text "Select file" und eine Klasse mit zusätzlichen Stilen zum Stylen des .file-input div hinzugefügt. Dies sollte der kanonische Ausgangspunkt für alle sein, die ein benutzerdefiniertes Datei-Upload-Element erstellen möchten.

Demo: JSFIDDLE

1
r3wt

Wie in JGuo und CorySimmons erwähnt, können Sie das anklickbare Verhalten einer stilisierbaren Beschriftung verwenden, um das weniger flexible Dateieingabeelement auszublenden.

<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>

</body>
</html>
1
KitKat

Falls Sie nach einer JavaScript-Bibliothek suchen - eine Standardlösung jquery-fileinput funktioniert problemlos.

1
ellimilial

Update Egal, das funktioniert in IE nicht oder es ist ein neuer Bruder, FF. Funktioniert erwartungsgemäß für alle anderen Elementtypen, jedoch nicht für Dateieingaben. Eine viel bessere Möglichkeit besteht darin, einfach eine Dateieingabe und eine Beschriftung zu erstellen, die darauf verweist. Stellen Sie die Dateieingabe auf "Keine" und boomt, es funktioniert nahtlos in IE9 +.

Achtung: Alles darunter ist Mist!

Durch die Verwendung von Pseudoelementen, die in Bezug auf ihren Container positioniert/in der Größe angepasst sind, können wir mit nur einer Eingabedatei auskommen (kein zusätzliches Markup erforderlich) und wie gewohnt formatieren.

Demo

<input type="file" class="foo">

.foo {
    display: block;
    position: relative;
    width: 300px;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.foo:hover:after {
    background: #5978f8;
}
.foo:after {
    transition: 200ms all ease;
    border-bottom: 3px solid rgba(0,0,0,.2);
    background: #3c5ff4;
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: 'Upload Something';
    line-height: 60px;
    border-radius: 5px;
}

Viel Spaß, Leute!

Altes Update

Verwandelte dies in ein Stylus-Mixin. Sollte für eine von euch coolen SCSS-Katzen einfach genug sein, um es zu konvertieren.

file-button(button_width = 150px)
  display block
  position relative
  margin auto
  cursor pointer
  border 0
  height 0
  width 0
  outline none
  &:after
    position absolute
    top 0
    text-align center
    display block
    width button_width
    left -(button_width / 2)

Verwendungszweck:

<input type="file">

input[type="file"]
    file-button(200px)
1
corysimmons

Eine schnelle und grobe Möglichkeit besteht darin, die Beschriftung als Schaltfläche festzulegen und die Position auf "Absolut" zu setzen, sodass sie über der ursprünglichen Schaltfläche schwebt. Der Dateiname wird weiterhin angezeigt. Ich denke jedoch über eine mobile Lösung nach.

0
Tomas Crofty

Simulieren Sie einfach einen Klick auf den <input>, indem Sie die Funktion trigger() verwenden, wenn Sie auf einen gestalteten <div> klicken. Ich habe meine eigene Schaltfläche aus einem <div> erstellt und dann beim Klicken auf meinen <div> einen Klick auf input ausgelöst. Auf diese Weise können Sie Ihre Schaltfläche so erstellen, wie Sie möchten, da es sich um einen <div> handelt, und einen Klick auf Ihre Datei <input> simulieren. Verwenden Sie dann display: none für Ihr <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");
});
0
James Marquez

Ich fand diesen Ansatz am einfachsten und leichtesten.

Hier ist das Arbeitsbeispiel: http://codepen.io/c3zar22/pen/QNoYXN

Nachfolgend finden Sie die Erklärungen:

  • dies wäre der Aufschlag:

    <label for="attach-project-file">
        <span id="remove-project-file" class="close">x</span>
        <div class="filename" id="attached-project-file">Click to select a file</div>
    </label>
    <input id="attach-project-file" type="file">
    
  • verstecke die Eingabe auf eine hackige Art und Weise wie folgt:

    #attach-project-file {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    
  • stylen Sie stattdessen das entsprechende Etikett

    [for="attach-project-file"] {
        /* your styles here */
    }
    
  • stil "Datei entfernen" -Taste

    .close {
        font-size: 16px;
        padding: 10px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        font-style: normal;
    }
    
  • Das Element .filename wird verwendet, um die ausgewählte Datei anzuzeigen

  • im Folgenden ist der kommentierte JS-Code aufgeführt, der (mithilfe von jQuery) benötigt wird, damit er funktioniert:

    var $attach = $('#attach-project-file'),
        $remove = $('#remove-project-file'),
        $name = $('#attached-project-file');
    
    // initially hide the remove button
    $remove.hide();
    
    // do this when file input has changed
    // i.e.: a file has been selected
    $attach.on('change', function() {
        var val = $(this).val();
        if (val !== '') {
            // if value different than empty
    
            // show the file name as text
            // hide/text/fadeIn creates a Nice effect when changing the text
            $name
                .hide()
                .text(val)
                .fadeIn();
    
            // show the remove button
            $remove.fadeIn();
        } else {
            // if value empty, means the file has been removed
    
            // show the default text
            $name
                .hide()
                .text('Click to select a file')
                .fadeIn();
    
            // hide remove button
            $remove.fadeOut();
        }
    });
    
    // remove selected file when clicking the remove button
    // prevent click bubbling to the parent label and triggering file selection
    $remove.on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
    
        $attach
            .val('')
            .change(); // trigger change event
    });
    
0
Cezar D.

Wenn sich noch jemand darum kümmert, wie das ohne JavaScript geht, lass mich Josh antworten:

So zeigen Sie den Text des Dateinamens an:

Am einfachsten ist es, beide Elemente an eine Position zu setzen: Relativ, geben Sie der Beschriftung einen höheren Z-Index und geben Sie der Eingabedatei einen negativen Rand, bis der Beschriftungstext dort ist, wo Sie ihn haben möchten. Keine Anzeige verwenden: keine am Eingang!

Beispiel :

input[type="file"] {
  position:relative;
  z-index:1;
  margin-left:-90px;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position:relative;
  z-index:2;
  background:white;

}
0
KoU_warch

Hier ist eine kreuzkompatible Methode, die in Chrome, Firefox, Safari und IE funktioniert.

$(window).on('resize',function() {
        var eqw = $('input[type=text]').width();
        $('textarea').width(eqw - 32);
        $('.fileoutline').width(eqw);
}).trigger('resize');

$('.file+.file').hide();

$(".file").click(function() {
    var input = $(this).next().find('input');
    input.click();
});
$("input[id='file1']").change(function () {
        $('.file+.file').show();
        var filename = $(this).val();
        $('.filename1').html(filename);
        $('.file').find('span').html('CHANGE FILE');
});
$("input[id='file2']").change(function() {
        var filename = $(this).val();
        $('.filename2').html(filename);
        $('.file').find('span').html('CHANGE FILE');
});
        
form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; }
fieldset{border:0;margin:0;padding:0;}
textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;}
input:focus{outline:none;}
input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;}
input:focus{outline:0;}
.fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; }
input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; }
.file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;}
.file,.filename1,.filename2 { font-weight:200;line-height:28px;}
.filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;}
.file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; }
::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; }
#submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;}
<form action="" method="post" enctype="multipart/form-data">
    <input type="text" name="email" id="email" placeholder="Email address" />
    <input type="text"  type="text" name="name" id="title" placeholder="Name" />
    <textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea>
    <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div>
    <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div>
    <input type="submit" name="submit" value="Submit" id="submit">
</form>
0
davidcondrey

jQuery-Version des Teshguru-Skripts zur automatischen Erkennung von Eingabe [Datei] und Stil

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
#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;
  }
</style>
<script type="text/javascript">
$(document).ready(function()
{
    $('input[type=file]').each(function()
    {
        $(this).attr('onchange',"sub(this)");
        $('<div id="yourBtn" onclick="getFile()">click to upload a file</div>').insertBefore(this);
        $(this).wrapAll('<div style="height: 0px;width: 0px; overflow:hidden;"></div>');
    });
});
 function getFile(){
   $('input[type=file]').click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
 }
</script>
</head>
<body>
<?php 
    var_dump($_FILES);
?>
<center>
<form action="" method="post" enctype="multipart/form-data" name="myForm">

<input id="upfile" name="file" type="file" value="upload"/>
<input type="submit" value='submit' >
</form>
</center>
</body>
</html>
0
h0mayun

Plug-in-Lösungen, die ich für zu schwer befunden habe, haben mein eigenes jQuery-Plug-in mit dem Namen Drolex FileStyle erstellt.

Mit diesem Plug-In können Sie Dateieingabefelder beliebig gestalten. Tatsächlich gestalten Sie div-Elemente so, dass sie wie eine ausgetrickste Dateieingabe aussehen. Die tatsächliche Dateieingabe wird automatisch mit 0% Deckkraft überlagert. Es ist kein zusätzliches HTML erforderlich. Fügen Sie einfach die CSS- und JS-Dateien in die gewünschte Seite ein. Drolex FileStyle und fertig! Bearbeiten Sie die CSS-Datei nach Ihren Wünschen. Vergessen Sie die jQuery-Bibliothek nicht, wenn Ihre Seite diese noch nicht enthält. Wenn der Client kein JavaScript ausführt, wird die Dateieingabe von js oder css nicht geändert.

Funktioniert getestet in Chrome 24, Firefox 18, Internet Explorer 9. Funktioniert voraussichtlich in früheren Versionen dieser und anderer.

Download: http://web.drolex.net/Drolex-FileStyle.Zip

0
drolex