Discussion :

[ksomda]

Bonsoir tout le monde,
je suis débutant en programmation avec jquery et ajax. Je souhaite réaliser un chargement et affichage immédiatement: de cinq photos sans rafraichir la page.
actuellement, ce que j'ai pu faire c'est le chargement et l'affichage d'une seule photo même si je choisis plusieurs images c'est la première qui est toujours choisie. choisi.
voici mon code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/* The uploader form */
$(function (){
	$(":file").change(function (){
		if (this.files && this.files[0]){
			var reader = new FileReader();
			reader.onload = imageIsLoaded;
			reader.readAsDataURL(this.files[0]);
		}
	});
});
function imageIsLoaded(e){
	$('#photo').attr('src', e.target.result);
};

Code html :

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

1
2
3
<input type='file' name='photos[5]' multiple='true'/>
</br>
<img id="photo" src="#" alt="your picture" >

[danielhagnoul]

Exemple (tiré d'une réponse précédente à une question similaire) :

Code CSS :

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

#divImg img { display: block; margin: 12px; }

Code HTML :

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

1
2
3
4
<div>
    <input id="fileInput" type="file" accept="image/*" multiple>
</div>
<div id="divImg"></div>

Code JS :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( "#divImg" ).on( "click", "img", function(){
        $( this ).remove();
    });
 
    $( "#fileInput" ).on( "change", function( e ){
 
        var w = 0, 
            file, 
            img, 
            reader = new FileReader(),
            files = e.target.files,
            limite = files.length,
            lire = function(){
                file = files[ w++ ];
 
                img = document.createElement( "img" );
 
                reader.onload = function( e ){
                    img.src = reader.result;
                    $( "#divImg" ).append( img );
                };
 
                reader.onloadend = function(){
                    if ( w < limite ){
                        lire();
                    }
                };
 
                reader.readAsDataURL( file );
           };
 
        if ( limite > 0 ){
            lire();
        }
 
    });
 
});