Prévisualisation image avant upload

Sujet résolu

16 octobre 2018 à 11:22:31

Bonjour,

1) J'ai besoin d'insérer dans mon formulaire 5 input file avec prévisualisation de l'image avant l'upload. Je suis nul en javascript ...

J'ai réussi à faire cela avec mon 1er champ input file.

Je n'arrive pas à le faire sur mes 5 champs. Je pense qu'il doit y avoir une méthode plus simple que de copier 5 fois le script. Je n'arrive pas à faire la boucle en javascript ...

Si quelqu'un peut m'aider, ce serait cool.

Merci.

Voici mon code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Prévisualisation image</title>

    <style>

      body {
          padding-top: 50px;
          text-align: center;
      }

      img {
          margin: 15px;
          vertical-align: middle;
      }

      #prev {
          margin-top: 30px;
      }
    </style>
    
  </head>

  <body>

    
    <div><input id="file" name="my_file" type="file" multiple /></div>  
    <div id="prev"></div><div>
      <input id="file2" name="my_file2" type="file" multiple /></div>  
    <div id="prev2"></div>
<input id="file3" name="my_file3" type="file" multiple /></div>  
    <div id="prev3"></div>
<input id="file4" name="my_file4" type="file" multiple /></div>  
    <div id="prev4"></div>
<input id="file5" name="my_file5" type="file" multiple /></div>  
    <div id="prev5"></div>

    <script>
    (function() {

        function createThumbnail(file) {

            var reader = new FileReader();

            reader.addEventListener('load', function() {

                var imgElement = document.createElement('img');
                imgElement.style.maxWidth = '150px';
                imgElement.style.maxHeight = '150px';
                imgElement.src = this.result;
                prev.appendChild(imgElement);

            }, false);

            reader.readAsDataURL(file);

        }

        var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'],
            fileInput = document.querySelector('#file'),
            prev = document.querySelector('#prev');

        fileInput.addEventListener('change', function() {

            var files = this.files,
                filesLen = files.length,
                imgType;

            for (var i = 0 ; i < filesLen ; i++) {

                imgType = files[i].name.split('.');
                imgType = imgType[imgType.length - 1];

                if(allowedTypes.indexOf(imgType) != -1) {
                    createThumbnail(files[i]);
                }

            }

        }, false);

    })();
    </script>

  </body>
</html>

piero5673

16 octobre 2018 à 11:55:27

Au lieu d'utiliser des Id, tu peux utiliser des classes (au passage, document.getElementById() est la méthode la plus performante).

html :

<div><input id="file" class="file" name="my_file" type="file" multiple /></div>
<div id="prev" class="prev"></div><div>
    ...
<input id="file5" class="file" name="my_file5" type="file" multiple /></div> 
<div id="prev5" class="prev"></div>

js :

function createThumbnail(file, prev) {

        var reader = new FileReader();

        reader.addEventListener('load', function() {

            var imgElement = document.createElement('img');
            imgElement.style.maxWidth = '150px';
            imgElement.style.maxHeight = '150px';
            imgElement.src = this.result;
            prev.appendChild(imgElement);

        }, false);

        reader.readAsDataURL(file);

    }
    var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'],
        filesInput = document.getElementsByClassName('file'),
        prevs = document.getElementsByClassName('prev');

    filesInput.forEach(function (input, j) {
        input.addEventListener('change', function() {

            var files = this.files,
            filesLen = files.length,
            imgType;
        
            for (var i = 0 ; i < filesLen ; i++) {
        
            imgType = files[i].name.split('.');
            imgType = imgType[imgType.length - 1];
        
            if(allowedTypes.indexOf(imgType) != -1) createThumbnail(files[i], prevs[j]);
        
        }
        }, false);
    })

Antalex

17 octobre 2018 à 14:24:04

Merci pour ton aide piero, j'ai essayé ton code. Celui ne fonctionne pas.

Voici ce que me dit la console : TypeError: filesInput.forEach is not a function

Voici le fichier modifié avec ton code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Prévisualisation image</title>
 
    <style>
 
      body {
          padding-top: 50px;
          text-align: center;
      }
 
      img {
          margin: 15px;
          vertical-align: middle;
      }
 
      #prev {
          margin-top: 30px;
      }
    </style>
     
  </head>
 
  <body>
 
     
    <div><input id="file" class="file" name="my_file" type="file" multiple /></div> 
    <div id="prev" class="prev"></div><div>
      <input id="file2" class="file" name="my_file2" type="file" multiple /></div> 
    <div id="prev2" class="prev"></div>
<input id="file3" class="file" name="my_file3" type="file" multiple /></div> 
    <div id="prev3" class="prev"></div>
<input id="file4" class="file" name="my_file4" type="file" multiple /></div> 
    <div id="prev4" class="prev"></div>
<input id="file5" class="file" name="my_file5" type="file" multiple /></div> 
    <div id="prev5" class="prev"></div>
 
    <script>
    (function() {
 
        function createThumbnail(file, prev) {
 
        var reader = new FileReader();
 
        reader.addEventListener('load', function() {
 
            var imgElement = document.createElement('img');
            imgElement.style.maxWidth = '150px';
            imgElement.style.maxHeight = '150px';
            imgElement.src = this.result;
            prev.appendChild(imgElement);
 
        }, false);
 
        reader.readAsDataURL(file);
 
    }
    var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'],
        filesInput = document.getElementsByClassName('file'),
        prevs = document.getElementsByClassName('prev');
 
    filesInput.forEach(function (input, j) {
        input.addEventListener('change', function() {
 
            var files = this.files,
            filesLen = files.length,
            imgType;
         
            for (var i = 0 ; i < filesLen ; i++) {
         
            imgType = files[i].name.split('.');
            imgType = imgType[imgType.length - 1];
         
            if(allowedTypes.indexOf(imgType) != -1) createThumbnail(files[i], prevs[j]);
         
        }
        }, false);
    })
 
    })();
    </script>
 
  </body>
</html>

piero5673

17 octobre 2018 à 14:46:37

Oups, my bad. document.getElementsByClassName() renvoie une collection, pas un tableau ^^'

filesInput = document.getElementsByClassName('file')
//à transformer en
filesInput = Object.values(document.getElementsByClassName('file'))

Antalex

20 octobre 2018 à 17:59:47

Cela fonctionne.

Merci beaucoup piero !