web-dev-qa-db-fra.com

css cacher le bouton "Choisir le fichier" mais afficher le fichier après sélection

Je voudrais faire le bouton personnalisé pour un téléchargement d'image. Je peux obtenir ce résultat avec la démo ci-dessous:

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

Mais comment puis-je afficher le nom du fichier sélectionné après? Ou peut-être même une vignette d'une image si possible? Comme après avoir choisi un fichier dans la fenêtre qui s'ouvre, je voudrais qu'il affiche "le nom du fichier" sur la page après l'avoir sélectionné. 

Javascript - jQuery est totalement une option ici si quelqu'un peut aider dans ce domaine. 

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;
}
javascriptjqueryhtmlcssfile
7
Papa De Beau

Avec l'ajout de javascript, nous pouvons simplement surveiller l'événement change sur l'entrée et mettre le nom sur la page. Veuillez noter ces modifications mineures du code HTML:

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

Avec ce jQuery:

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

Travailler Fiddle

7
cale_b

Il suffit de taper sur l'événement de modification de l'élément de fichier:

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

Montré dans ce violon: https://jsfiddle.net/pbg44bqu/12/

3
Scott Marcus

Ce script affiche l'image dès son téléchargement:

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

La source

Mise à jour Fiddle

1
WcPc