css nascondi il pulsante "Scegli file" ma visualizza il file dopo aver selezionato

Question

Vorrei creare un pulsante personalizzato per il caricamento di un'immagine. Sono in grado di ottenere questo risultato con la demo di seguito:

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

ma come faccio a visualizzare il nome del file selezionato dopo? O forse anche una miniatura di un'immagine, se possibile? Come dopo aver scelto un file dalla finestra che si apre, mi piacerebbe che mostrasse "il nome del file" sulla pagina dopo che l'ho selezionato.

Javascript - jQuery è totalmente un'opzione qui se qualcuno può aiutare in quella zona.

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

Con l'aggiunta di javascript, possiamo solo guardare per l'evento change sull'ingresso, e mettere il nome della pagina. Si prega di notare questi cambiamenti HTML minori:

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

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

Questo script mostra l'immagine non appena caricato:

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

Basta sfruttare l'evento di modifica del file di elemento:

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

mostrato in questo violino: https://jsfiddle.net/pbg44bqu/12/