J'ai créé une fonction pour sélectionner l'image à partir du type d'entrée = "fichier" et montrer ce fichier téléchargé sur un div mais le problème est qu'il y aura plusieurs fichiers d'entrée comme ce sera 3 fichiers d'entrée que j'ai liés beaucoup mais le problème auquel je suis confronté est seulement 1 image montre et les 2 autres ne sont pas affichés.

function head(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#head_shot').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#head").change(function() {
  head(this);
});

function side_profile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#side_profile').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#side_profile").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#full").change(function() {
  full(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile" id="side_profile">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full">
    </div>
  </div>
</div>
1
Mark Alan 8 août 2016 à 13:15

4 réponses

Meilleure réponse

Pour résoudre votre problème, je change les ID de vos champs d'image en une autre valeur car elle est en conflit avec les ID de votre entrée de fichier.

Règle générale: vous ne pouvez pas avoir d'éléments avec le même ID dans DOM

function head(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#head_shot-img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#head").change(function() {
  head(this);
});

function side_profile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#side_profile-img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#side_profile").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full-img').attr('src', e.target.result);
    }

    reader3.readAsDataURL(input.files[0]);
  }
}

$("#full").change(function() {
  full(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot-img" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile-img" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full-img" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile" id="side_profile">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full">
    </div>
  </div>
</div>

Ceci est une suggestion

J'utilise Jquery Multifile sans problème.

  1. Le plugin vous permet de télécharger un seul fichier ou même plusieurs fichiers. Chaque lot de téléchargements est groupé et associé à un bouton de fermeture afin que vous ne puissiez supprimer que des fichiers spécifiques.
  2. La prochaine fonctionnalité intéressante est l'aperçu des images.
2
Sherlock 8 août 2016 à 10:45
  1. parcourir tous les fichiers sélectionnés
  2. Créer un nouveau lecteur pour chaque fichier
  3. Ajouter un nouvel élément img pour chaque image dans le conteneur photographié et attribuer le src de la nouvelle image comme contenu du fichier actuel

Veuillez consulter Démonstration de travail chez plunker

function showSelectedPhotoes(input) {

  if(!input.files)
    return;

  for(i=0;i<input.files.length;i++)
  {

    var reader3 = new FileReader();    
    reader3.onload = function(e) {
      $('#all_photoes_container').append('<img width="100" height="100" src='+e.target.result+' />')
    };
    reader3.readAsDataURL(input.files[i]);
  }        
}
1
Sami 8 août 2016 à 10:58

À première vue, il s'agit d'un conflit d'identité. Dans votre premier choix d'image, vous avez id="head_shot" pour l'img puis id="head" pour le bouton. Cela fonctionne bien, car les identifiants sont différents. Cependant, plus tard, vous avez id="side_profile" pour l'image et le bouton, donc le script ignore simplement le deuxième élément avec le même identifiant. Voici une version fixe:

function head(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#head_shot').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#head").change(function() {
  head(this);
});

function side_profile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#side_profile').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#side_profile2").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full').attr('src', e.target.result);
    }

    reader3.readAsDataURL(input.files[0]);
  }
}

$("#full2").change(function() {
  full(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile2" id="side_profile2">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full2">
    </div>
  </div>
</div>

PS. il y avait aussi une faute de frappe dans la variable reader3 dans la dernière fonction - à un moment donné, vous avez perdu le "3".

1
AgataB 8 août 2016 à 10:37

Vous pouvez voir le code mis à jour et optimisé Ici ... J'ai optimisé votre code avec des modifications html et jquery qui vous sont très utiles. et vous pouvez également télécharger plusieurs fichiers.

Votre code HTML

<div class="img-sec">
   <div class="container">
      <div class="col-sm-4">
         <div class="img-box">
            <h4>head shot</h4>
            <div id="head_shot"></div>
         </div>
      </div>
      <div class="col-sm-4">
         <div class="img-box">
            <h4>Side Profile</h4>
            <div id="side_profile"></div>
         </div>
      </div>
      <div class="col-sm-4">
         <div class="img-box">
            <h4>Full Length</h4>
            <div id="full_length"></div>
         </div>
      </div>
   </div>
</div>
<div class="picture_sec">
   <div class="container">
      <div class="lb-put">
         <label>Head Shot</label>
         <input type="file" class="form-control" name="head_shot" id="head" multiple>
      </div>
      <div class="lb-put">
         <label>Side Profile</label>
         <input type="file" class="form-control" name="side_profile" id="side" multiple>
      </div>
      <div class="lb-put">
         <label>Full Length</label>
         <input type="file" class="form-control" name="full_length" id="full" multiple>
      </div>
   </div>
</div>

Votre code jQuery:

$('input[type="file"]').change(function() {
    var elemPreview = '#' + $(this).attr('name');
    var elemChange = $(this);
    fileupload(elemChange, $(elemPreview));
});

function fileupload(elemChange, elemPreview) {
    if (typeof(FileReader) != "undefined") {
        var dvPreview = elemPreview;
        dvPreview.html("");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        $(elemChange[0].files).each(function() {
            var file = $(this);
            if (regex.test(file[0].name.toLowerCase())) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $("<img />");
                    img.attr("style", "height:100px;width: 100px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);
            } else {
                alert(file[0].name + " is not a valid image file.");
                dvPreview.html("");
                return false;
            }
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
}
0
Rahul K 9 août 2016 à 05:23