Orienter une image affichée et la fermer avec un clic

Version imprimable

Bonjour

J'ai "usurpé" du code et j'aimerais le modifier pour m’assurer que l'image qui apparaît (suite à une sélection) soit toujours affichée à la même position sur ma page. Actuellement (avec le reste de mon code) l'image s'affiche à un endroit inusité et j'ignore pourquoi....
J'aimerais aussi pouvoir fermer l'image en cliquant dessus...

Code:

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
 
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
 <input type="file">
<script>
$("input").change(function(e) {
 
    for (var w = 0; w < e.originalEvent.srcElement.files.length; w++) {
 
        var file = e.originalEvent.srcElement.files[w];
 
        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onload = function (e) {
             img.src = reader.result
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});
	</script>	
 
  </body>
</html>

Merci

Bonjour,
visiblement tu n'as pas choisi le plus compatible.

Avec ceci cela devrait peut mieux le faire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("input").change(function (e) {
    var i, file, fichiers = e.target.files;
 
    for (i = 0; file = fichiers[i]; i++) {
 
        var reader = new FileReader();
        reader.onload = function (e) {
            var oImg = $('<img>', {
                'src': e.target.result,
                'on': {
                    'click': function (event) {
                        alert('Photos cliqued!');
                    }
                }
            })
 
            // c'est ici que tu choisi l'endroit
            // ou tu souhaites mettre ton image
            $("input").after(oImg);
 
        }
        reader.readAsDataURL(file);
    }
});

dans l'exemple il te suffit de mettre ce que tu souhaites dans la fonction sur le click, quant à la position d'affichage dans ta page il te suffit de l'ajuster.

Peut être qu'une lecture de la Documentation te ferais du bien ;)
:fleche: jQuery API, sans oublier la FAQ jQuery.

17/09/2014, 14h02
isrdum

Merci du fond du coeur

Toutefois, j'ignore totalement ce que je dois faire pour "orienter" l'image!!!!
Probablement une Noob question, mais je n'ai pas trouvé de réponse sur les différents forum.

Le code, dans sa forme actuelle, fait en sorte qu'une foule d'images apparaissent.... soit à côté de chaque élément que j'ai inséré dans ma page

Citation:

Envoyé par NoSmoking

// c'est ici que tu choisi l'endroit
// ou tu souhaites mettre ton image
$("input").after(oImg);

La manière de placer les images dans votre page dépend de vos codes CSS et HTML.

Exemple : chargement d'images (une ou plusieurs à la fois) dans une division, chaque image est un "block" indépendant, disparition de l'image sur un "click".

Code:

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

Code:

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

Code:

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();
        }
 
    });
 
});

26/09/2014, 17h14
isrdum

Merci danielhagnoul et NoSmoking!!!