css hide "Wählen Sie die Datei" -Taste aber Anzeige der Datei nach der Auswahl

Question

Ich möchte benutzerdefinierte Schaltfläche für ein Bild hochladen. Ich bin in der Lage, dieses Ergebnis mit der Demo unten zu bekommen:

https://jsfiddle.net/algometrix/fgrbyo4z/

Aber wie kann ich die Dateinamen nach dem gewählten Anzeige? Oder vielleicht sogar ein Vorschaubild eines Bildes wenn möglich? Wie nachdem ich eine Datei aus dem Fenster gewählt habe, das sich öffnet, würde ich gerne den Dateinamen auf der Seite anzeigen, nachdem ich sie ausgewählt habe.

Javascript - jQuery ist völlig eine Option hier, wenn jemand in diesem Bereich helfen kann.

HTML

<div> 
    <div style="display:block;text-align:center;margin-top:20%;"> 
    <label for="files"> <span class="btn">Select Image</span></label> 
    <input style="visibility: hidden; position: absolute;" id="files" class="form-control" type="file" name="files"> 

    </div> 

</div> 

CSS

.btn { 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 20px; 
    background: #3f88b8; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
} 

.btn:hover { 
    background: #3cb0fd; 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
    text-decoration: none; 
} 

Answer 1

Mit dem Zusatz von Javascript, können wir für das change Ereignis am Eingang nur zuschauen, und den Namen auf der Seite platzieren. Bitte beachten Sie diese kleinen HTML-Änderungen:

<div class="file-upload"> 
    <label for="upload-1" class="btn">Upload</label> 
    <input type="file" id="upload-1"> 
    <p class="file-name">Please select a file.</p> 
</div> 

Mit dieser jQuery:

jQuery(function($) { 
    $('input[type="file"]').change(function() { 
    if ($(this).val()) { 
     var filename = $(this).val(); 
     $(this).closest('.file-upload').find('.file-name').html(filename); 
    } 
    }); 
}); 

Working Fiddle

Answer 2

Dieses Skript zeigt das Bild, sobald hochgeladen:

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#img').show().attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#files").change(function(){ 
    readURL(this); 
}); 

Source

Updated Fiddle

Answer 3

Tippen Sie einfach in das Änderungsereignis des Datei Element:

var file = document.getElementById("files"); 
file.addEventListener("change", function(){ alert(this.value); }); 

in dieser Geige dargestellt: https://jsfiddle.net/pbg44bqu/12/