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

**isrdum** · 15/09/2014, 17h48

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 :

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
<!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

**NoSmoking** · 16/09/2014, 22h28

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

Avec ceci cela devrait peut mieux le faire

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
$("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

jQuery API, sans oublier la FAQ jQuery.

**isrdum** · 17/09/2014, 14h02

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

Envoyé par NoSmoking

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

**danielhagnoul** · 18/09/2014, 21h44

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

**isrdum** · 26/09/2014, 17h14

Merci danielhagnoul et NoSmoking!!!

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

jQuery

Discussions similaires

Partager

Partager