Charger et afficher plusieurs images

**Zoulouseb** · 28/12/2018, 19h36

Bonjour à tous, je viens régulièrement sur ce forum pour régler des soucis et j'y trouve bien souvent la solution,
mais pas cette fois si,

j'ai un script qui me permet d'afficher une prévisualisation de mon image, j'aimerais que ce script puisse servir pour charger plusieurs images sur la meme pages mais je ne parviens pas à le modifier une bonne ames pourrait m'aider ?

d'avance merci
code du script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function() {
  // Function for Preview Image.
  $(function() {
    $('#imag1a').change(function() {
      if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
      }
    });
  });
 
  function imageIsLoaded(e) {
    $('#message').css("display", "none");
    $('#preview').css("display", "block");
    $('#previewimg').attr('src', e.target.result);
    $('#filesql').attr('value', e.target.result);
    $('#test').css("display", "none");
    $('#previewimg').css("display", "block");
  };
  // Function for Deleting Preview Image.
  $("#deleteimg").click(function() {
    $('#preview').css("display", "none");
    $('#file').val("");
  });
  // Function for Displaying Details of Uploaded Image.
  $("#submit").click(function() {
    $('#preview').css("display", "none");
    $('#message').css("display", "block");
  });
});

Code de la page appelante

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div style="float:left; width:150px; height:150; margin-left:10px; margin-top:10px;">
<input class="input-file" id="imag1a" type="file" style="display:none;">
<label for="imag1a" style=" border:0px; text-align: center;" class="input-file-trigger" tabindex="0">
<img id="previewimg" src="" style=" border:0px; text-align: center; max-height:125px; padding:0px; MAX-width:150px; display:none;" width="auto">
<img id=test src="image/foto.png">
</label>
</div>

**Toufik83** · 29/12/2018, 15h46

Envoyé par Zoulouseb

j'aimerais que ce script puisse servir pour charger plusieurs images sur la meme pages mais je ne parviens pas à le modifier

tu veux dire que tu cherches à appliquer le script sur plusieurs input file dans ta page appelante?

parce que d'après ton code je ne vois qu'un seul input de type file dans la page appelante, en plus tu le met en display:none, ce qui empêche de choisir un fichier

**Zoulouseb** · 30/12/2018, 13h17

Bonjour et bon dimanche

oui effectivement je souhaite en affiche plusieurs mais oui je n'avais mis qu'un seule input
je les mets en display none pour l'esthétique et je les appelle via le label
entre temps j'ai trouvé la solution avec un autre script
pour ceux que cela pourrait intéresser je mets la solution
!!! le fichier script ou le script doit absolument être chargé en fin de page !!!!!

Code de la page

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="border:1px solid red; float:left; width:150px; height:150; margin-left:10px; margin-top:10px;"><center>
					<input class="input-file imgup" id="imag1a" type="file" style="display:none;">
					<label for="imag1a" style=" border:0px; text-align: center;" class="input-file-trigger" tabindex="0">
						<img id="previewimg1a" src="" style=" border:0px; text-align: center; max-height:125px; padding:0px; MAX-width:150px; display:none;" width="auto">
 
						<img id="test1a" src="image/foto.png"></label></center>
					</div>
					<div style="border:1px solid black; float:left; width:150px; height:150; margin-left:10px; margin-top:10px;">
					<center><input class="input-file imgup" id="imag1b" type="file" style="display:none;">
					<label for="imag1b" style=" border:0px; text-align: center;" class="input-file-trigger" tabindex="0">
						<img id="previewimg1b" src="" style=" border:0px; text-align: center; max-height:125px; padding:0px; MAX-width:150px; display:none;" width="auto">
 
						<img id="test1b" src="image/foto.png"></label></center>
					</div>

Code jqerry à placer en fin de page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-------- préview image ----------->
function readURL(input, newid) {
 
  if (input.files && input.files[0]) {
    var reader = new FileReader();
 
    reader.onload = function(e) {
      $('#previewimg'+newid).attr('src', e.target.result);
	  $('#previewimg'+newid).css('display', "block");
	  $('#test'+newid).css('display', "none");
	  $('#filesql'+newid).attr('value', e.target.result);
    }
 
    reader.readAsDataURL(input.files[0]);
  }
}
$("body").on("change", '.imgup', function() {
var idimgup = $(this).attr("id");
var newid = idimgup.substring(4,idimgup.length);
readURL(this, newid);
});

**Toufik83** · 30/12/2018, 18h13

Salut,
comme il est possible aussi de mettre le script en haut de la page (dans la balise <head>), puis passer le résultat du FileReader en paramètre a la fonction imageIsLoaded

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html>
<html lang='fr'>
<head><title>Loading Images</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
  // Function for Preview Image.
  $('.imgup').change(function(event) {
      if (this.files && this.files[0]) {
        var reader = new FileReader();
                reader.onload = function () {
                        imageIsLoaded(event,this.result);
                };
        reader.readAsDataURL(this.files[0]);
      }
    });
  
  
  function imageIsLoaded(e,result) {
        $("#"+e.target.id)
        .next('label')
        .find('img').eq(0)
        .attr('src', result)
        .show()
        .next('img').hide();
        /*  pour le #filesql+newid que tu met dans ton code précédent, 
                je ne vois aucun élément commençant par cet id, 
                donc c'est a toi de le cibler avec :
                newid=e.target.id.substring(4,e.target.id.length);
        */
  }
});
</script>
</head>
<body>
 
<div style="border:1px solid red; float:left; width:150px; height:150; margin-left:10px; margin-top:10px;">
	<center>
		<input class="input-file imgup" id="imag1a" type="file" style="display:none;">
		<label for="imag1a" style=" border:0px; text-align: center;" class="input-file-trigger" tabindex="0">
			<img id="previewimg1a" src="" style=" border:0px; text-align: center; max-height:125px; padding:0px; MAX-width:150px; display:none;" width="auto">
			<img id="test1a" src="image/foto.png">
		</label>
	</center>
</div>
<div style="border:1px solid black; float:left; width:150px; height:150; margin-left:10px; margin-top:10px;">
	<center>
		<input class="input-file imgup" id="imag1b" type="file" style="display:none;">
		<label for="imag1b" style=" border:0px; text-align: center;" class="input-file-trigger" tabindex="0">
			<img id="previewimg1b" src="" style=" border:0px; text-align: center; max-height:125px; padding:0px; MAX-width:150px; display:none;" width="auto">
			<img id="test1b" src="image/foto.png">
		</label>
	</center>
</div>
</body>
</html>

Charger et afficher plusieurs images

jQuery

Vue hybride

Discussions similaires

Partager

Partager