Discussion :

[MN_jacques]

Bonjour chers developpeurs,
je suis bloqué depuis quelques heures sur ces probleme, voilà apres upload de mes images je renvoi les images uploadées au navigateur par ajax tous se passe bien voici ma préoccupation est: par un clik sur le bouton supprimmer je veux supprimer l'image nouvellement ajouter avec ajax sans actualiser la page au préalable, du coup ca ne passe pas il faut d'abord actualiser la page pour que l'image puis etre supprimmable.
voici ma fonction getImage qui affiche les images au navigateur:

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
<script>
         $(document).ready(function () {
                getImages(0, <?php echo $numRows ?>);
            });
            function getImages(start, max) {
                if (start > max)
                    return;
                $.ajax({
                    url: '<?= WEBROOT;?>functions/putonline.php',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        getImages: 1,
                        start: start
                    }, success: function (response) {
                        for (var i=0; i < response.images.length; i++)
                          addImage("../img/thumbnail/min130/" + response.images[i].path, response.images[i].id);
                    }
                });
            }
 </script>
 if (isset($_POST['getImages'])) {
$sql = $db->query("SELECT id, name FROM images");
$photos = $sql -> fetchAll(); 
$response = array();
foreach ($photos as $getphoto) {
$response[] = array("path" => $getphoto['name'], "id" => $getphoto['id']);
}
exit(json_encode(array("images" => $response)));
    }

fonction upload image :

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
<script type="text/javascript">
 
            $(function () {
               var files = $("#files");
 
               $("#fileupload").fileupload({
                   url: 'edit.php',
                   dropZone: '#dropZone',
                   dataType: 'json',
                   autoUpload: false
               }).on('fileuploadadd', function (e, data) {
                   var fileTypeAllowed = /.\.(gif|jpg|png|jpeg)$/i;
                   var fileName = data.originalFiles[0]['name'];
                   var fileSize = data.originalFiles[0]['size'];
 
               }).on('fileuploaddone', function(e, data) {
               	    var status = data.jqXHR.responseJSON.status;
                    var msg = data.jqXHR.responseJSON.msg;
 
                    if (status == 1) {
                        var path = data.jqXHR.responseJSON.path;
                        addImage(path, 0);
                    }
                    else
                        $("#error").html(msg);
               });
            });
 
             function addImage(path, id) {
                if ($("#uploadedFiles").find('.row:last').find('.myImg').length === 4)
                    $("#uploadedFiles").append('<div class="row"></div>');
 
                    $("#uploadedFiles").find('.row:last').append('<div id="img_'+id+'"><img class="img_edit" src="'+path+'" /><a onclick="delImg('+id+')">Delete</a> </div>');
            }
        </script>

et enfin la fonction qui supprime l'image:

Code php :

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

1
2
3
4
5
6
 
if (isset($_POST['delImage'])){ 
$id_img = $db->quote($_POST['id']);
$db->query("DELETE FROM images where id = $id_img");
exit("Image deleted");
 }

ma question: pouvez-vous améliorer mon code pour qu' apres upload et affichage des images que j'ai la possiblité de les supprimer sans actualiser la page au préalable? merci d'avance

[MN_jacques]

ca y est j'ai passé l'id au meme moment lors de l'uploade de l'image et en suite repassé l'id dans ma fonction addImage et ca marche parfaitement.