10644 sujets

JavaScript, DOM et API Web HTML5

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>