Je voudrais faire un 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 de fichier sélectionné après? Ou peut-être même une miniature 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;
}
8
Papa De Beau 5 mars 2016 à 23:20

3 réponses

Meilleure réponse

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 HTML mineures:

<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 cette jQuery:

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

Violon de travail

8
random_user_name 5 mars 2016 à 20:34

Ce script montre l'image dès qu'elle est téléchargée:

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

Fiddle mis à jour

1
Community 23 mai 2017 à 12:02

Appuyez simplement 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 5 mars 2016 à 20:43