it-swarm.com.de

Ersetzen Sie input type = file durch ein Bild

Wie viele Leute möchte ich das hässliche input type=file, und ich weiß, dass es nicht ohne ein paar Hacks und/oder javascript geht. In meinem Fall dienen die Schaltflächen zum Hochladen von Dateien nur zum Hochladen von Bildern ( jpeg | jpg | png | gif ) Wenn ich ein "clickable" - Bild verwenden könnte, das genau wie eine Eingabedatei wirkt (das Dialogfeld und dieselbe $ _FILE auf der übergebenen Seite anzeigen).
Ich habe eine Problemumgehung gefunden hier und dieses interessante auch (funktioniert aber nicht auf Chrome = /).

Was macht ihr, wenn ihr euren Dateiknöpfen Stil verleihen wollt? Wenn Sie eine Meinung dazu haben, drücken Sie einfach die Antworttaste;)

85
Nicolas

Das funktioniert wirklich gut für mich:

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="placeholder.jpg"/>
  </label>

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

Grundsätzlich bewirkt das Attribut für des Labels, dass Klicken auf das Label dem Klicken auf die angegebene Eingabe entspricht.

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

Getestet in Chrome aber laut Web sollte das auf allen gängigen Browsern funktionieren. :)

EDIT: JSFiddle hier hinzugefügt: https://jsfiddle.net/c5s42vdz/

234
hardsetting

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 etwas Großes ein, wodurch sich die Größe der Schaltfläche "Durchsuchen" erhöht. Anschließend müssen Sie einige Versuche mit den negativen Eigenschaften links/oben durchführen, um die Schaltfläche zum Durchsuchen der Eingabe hinter Ihrem Etikett zu positionieren.

Wenn Sie die Schaltfläche 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 alle Browser testen, da alle die Eingabeschaltfläche in einer etwas anderen Größe darstellen.

Hier sehen Sie ein Beispiel (Schaltfläche "Track hinzufügen"): http://rakmastering.com/upload/

62
user210437

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 benutzt visibility: hidden, width:0 anstatt display: none für Safari-Ausgabe und hinzugefügt pointer-events: none in img -Tag, damit es funktioniert, wenn das Tag für den Eingabedateityp im FORM-Tag enthalten ist.

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

Hoffe es hilft jemandem.

12
rishi

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

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

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

4
Pekka 웃

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

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

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

EINSCHRÄNKUNG : In IE9 und IE10 wird das Formular als "gefährlich" gekennzeichnet, wenn Sie in einer Dateieingabe per Javascript einen Klick auslösen sicher, ob es traditionell eingereicht werden kann.

1
ParPar
        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 das bekommen, was Sie wollten. Sehr einfach und effektiv ohne Javascript. Viel Spaß !!!

1
Neocortex

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

Dann können Sie jedes Element haben, das Sie möchten - Anker oder Bild. Wenn Sie auf den Anker/das Bild klicken, klicken Sie auf das ausgeblendete Eingabefeld. Das Dialogfeld zum Auswählen einer Datei wird angezeigt.

EDIT: Eigentlich funktioniert es in Chrome und Safari, mir ist nur aufgefallen, dass dies in FF4Beta nicht der Fall ist

0
Petrunov

Arbeitscode:

verstecke einfach den eingabeteil und mach 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>
0
user3400389