Wie viele Leute möchte ich das Hässliche anpassen input type=file, und ich weiß, dass es ohne einige Hacks und / oder nicht geht javascript. In meinem Fall dienen die Schaltflächen zum Hochladen von Dateien jedoch nur zum Hochladen von Bildern ( jpeg | jpg | png | gif ). Daher habe ich mich gefragt, ob ich ein " clickable" Bild verwenden könnte, das genau als Eingabedatei fungiert ( Zeigen Sie das Dialogfeld und dieselbe $ _FILE auf der übermittelten Seite an.
Ich habe hier eine Problemumgehung gefunden , und diese auch interessant (funktioniert aber nicht mit Chrome = /).

Was macht ihr, wenn ihr euren Dateischaltflächen etwas Stil hinzufügen wollt? Wenn Sie eine Meinung dazu haben, klicken Sie einfach auf die Antwortschaltfläche;)

Das funktioniert wirklich gut für mich:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

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

Grundsätzlich bewirkt das for- Attribut des Etiketts, dass das Klicken auf das Etikett dem Klicken auf die angegebene Eingabe entspricht .

Die auf none gesetzte Anzeigeeigenschaft bewirkt außerdem, dass die Dateieingabe überhaupt nicht gerendert wird, wodurch sie schön und sauber ausgeblendet wird.

In Chrome getestet, sollte aber laut Web auf allen gängigen Browsern funktionieren. :) :)

EDIT: Added JSFiddle hier: https://jsfiddle.net/c5s42vdz/

Eigentlich kann es in reinem CSS gemacht werden und es ist ziemlich einfach ...

HTML Quelltext

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS-Stile

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

Die Idee ist, die Eingabe absolut innerhalb Ihres Etiketts zu positionieren. Stellen Sie die Schriftgröße der Eingabe auf einen großen Wert ein, wodurch die Schaltfläche "Durchsuchen" vergrößert wird. Es dauert dann einige Versuche und Irrtümer unter Verwendung der negativen Eigenschaften links / oben, um die Schaltfläche zum Durchsuchen der Eingabe hinter Ihrem Etikett zu positionieren.

Wenn Sie die Taste positionieren, setzen Sie das Alpha auf 1. Wenn Sie fertig sind, setzen Sie es wieder auf 0 (damit Sie sehen können, was Sie tun!)

Stellen Sie sicher, dass Sie browserübergreifend testen, da alle die Eingabeschaltfläche in einer etwas anderen Größe rendern.

Tolle Lösung von @hardsetting, aber ich habe einige Verbesserungen vorgenommen, damit es mit Safari (5.1.7) in Windows funktioniert

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

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

Ich habe visibility: hidden, width:0anstelle display: nonefür Safari-Problem verwendet und pointer-events: nonein imgTag hinzugefügt , damit es funktioniert, wenn sich das Tag des Eingabedateityps im FORM-Tag befindet.

Scheint für mich in allen gängigen Browsern zu funktionieren.

Hoffe es hilft jemandem.

Ich würde SWFUpload oder Uploadify verwenden . Sie brauchen Flash, machen aber alles, was Sie wollen, ohne Probleme.

Jede <input type="file">basierte Problemumgehung, die versucht, den Dialog "Datei öffnen" durch andere Mittel als das Klicken auf das eigentliche Steuerelement auszulösen, kann aus Sicherheitsgründen jederzeit aus den Browsern entfernt werden. (Ich denke, in den aktuellen Versionen von FF und IE ist es nicht mehr möglich, dieses Ereignis programmgesteuert auszulösen.)

Dies ist meine Methode, wenn ich Ihren Standpunkt verstanden habe

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

Es ist wirklich einfach, Sie können dies versuchen:

$("#image id").click(function(){
    $("#input id").click();
});

Sie können stattdessen ein Bild einfügen und dies folgendermaßen tun:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : Wenn Sie in IE9 und IE10 den Onclick in einer über Javascript eingegebenen Datei auslösen, wird das Formular als "gefährlich" gekennzeichnet und kann nicht mit Javascript eingereicht werden. Es ist nicht sicher, ob es traditionell gesendet werden kann.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

RUN SNIPPET oder Kopieren Sie einfach den obigen Code und führen Sie ihn aus. Sie werden bekommen, was Sie wollten. Sehr einfach und effektiv ohne Javascript. Genießen!!!

Die Eingabe selbst wird mit CSS-Sichtbarkeit ausgeblendet: ausgeblendet.

Dann können Sie jedes gewünschte Element haben - Anker oder Bild. Wenn Sie auf den Anker / das Bild klicken, lösen Sie einen Klick auf das ausgeblendete Eingabefeld aus. Das Dialogfeld zur Auswahl einer Datei wird angezeigt.

EDIT: Eigentlich funktioniert es in Chrome und Safari, ich habe gerade bemerkt, dass dies in FF4Beta nicht der Fall ist

Arbeitscode:

verstecke einfach den Eingabeteil und mache das so.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

Ich hatte in den letzten zehn Jahren viele Probleme mit versteckten und nicht sichtbaren Eingaben. Manchmal sind die Dinge viel einfacher als wir denken.

Ich hatte einen kleinen Wunsch mit IE 5,6,7,8 und 9, die Deckkraft nicht zu unterstützen, und daher würde die Dateieingabe das Upload-Bild abdecken, jedoch hat der folgende CSS-Code das Problem behoben.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

Das folgende Snipped wurde auf Chrome getestet, IE 5,6,7,8,9,10. Das einzige Problem in IE 5 ist, dass es keine automatische Marge unterstützt.

Führen Sie das Snippet aus, kopieren Sie einfach das CSS und fügen Sie HTML ein. HTML ändern Sie die Größe nach Ihren Wünschen.

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>