Forums Développement Multimédia

Aller au contenu

- - - - -

Supprimez le fichier image

CODE

13 réponses à ce sujet

#1 charlydar

  • Guests

Posté 24 October 2016 - 11:10 AM

Bonjour, je suis à la recherche de l'aide pour faire fonctionner se code. l'objectif est de supprimé la photo avec l'ajax pour éviter de rafraîchir la page web. je suis bloqué à ce niveau...


<?php
$files = "394e910bee43b1f96c7d102ef02f25639c96b373.656866775.jpg";
echo '<form>';
echo '<input type="hidden" value="'.$files.'" name="delete_file" id="delete_file" />';
echo '<input type="button" value="Delete image" onclick="delete_image()"/>';
echo '</form>';
?>
Then write a javascript function to call ajax.
<script>
function delete_image()
{
  var status = confirm("Are you sure you want to delete ?");
  if(status==true)
  {
    var file = $("#delete_file").val();
    $.ajax({
          type:"POST",
          url:"ImageLap.php",
          data:{file:file},
          success(html){
           alert('Deleted');
          }
    });
  }
}
</script>
 


#2 charlydar

  • Guests

Posté 24 October 2016 - 11:16 AM

Voir le messagecharlydar, le 24 October 2016 - 11:10 AM, dit :

Bonjour, je suis à la recherche de l'aide pour faire fonctionner se code. l'objectif est de supprimé la photo avec l'ajax pour éviter de rafraîchir la page web. je suis bloqué à ce niveau...


<?php
$files = "394e910bee43b1f96c7d102ef02f25639c96b373.656866775.jpg";
echo '<form>';
echo '<input type="hidden" value="'.$files.'" name="delete_file" id="delete_file" />';
echo '<input type="button" value="Delete image" onclick="delete_image()"/>';
echo '</form>';
?>
Then write a javascript function to call ajax.
<script>
function delete_image()
{
  var status = confirm("Are you sure you want to delete ?");
  if(status==true)
  {
        var file = $("#delete_file").val();
        $.ajax({
          type:"POST",
          url:"ImageLap.php",
          data:{file:file},
          success(html){
           alert('Deleted');
          }
        });
  }
}
</script>
 

Si joint le fichier ImageLap.php


<?php
if ( array_key_exists ('delete_file', $_POST ) ) {
           $filename = $_POST['delete_file'];
           if ( file_exists ( $filename ) ) {
                   unlink( $filename );
                   echo 'File '.$filename.' has been deleted';
           }
  }
 


#3 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1784 messages

Posté 25 October 2016 - 17:19 PM

Tu veux supprimer une image sur le serveur ?

#4 charlydar

  • Guests

Posté 27 October 2016 - 13:42 PM

Merci de la question ! Toutes mes excuses pour le rétard que je vous répond.
il s'agit d'une image uploadé au niveau du serveur par l'internaute.
j'ai pua avoir quelques solutions ci- joint les bouts de code PHP et AJAX:

PHP

if (isset($_GET['file']) && ($_GET['file']!='') && isset($_GET['repdossier']) && ($_GET['repdossier']!=''))
{
         $filename = $_GET['file'];
                $repdossier = $_GET['repdossier'];
                        if ( file_exists ('.$repdossier.'/'.$filename .'') ) {
                                unlink( '
.$repdossier.'/'.$filename.'' );
           }
}
Ajax:
// delete file upoad  
function delete_image()
{
  var status = confirm("Are you sure you want to delete ?");
  if(status==true)
  {
        var file = $("#delete_file").val();
        var repdossier = $("#repdossier").val();
        $.ajax({
          type:"POST",
          url:"ImageLap.php?file="+file+"&repdossier="+repdossier+"",
          data:{file:file},
          success(html){
           alert('File '+file+' has been deleted');
          }
        });
  }
}

 

et ça marche !
Pour l'instant, je suis en train de réfléchir, une fois la photo supprimée dans le dossier et comment l'enlevé au niveau de la page web sans rafraîchir la page ? :roll:
Je ne sais, si de votre côté vous pouvez me donner quelques pistes de solution en regardant la partie success(html) du code AJAX ?

#5 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 27 October 2016 - 21:56 PM

Salut,

Tu as plusieurs possibilités

La plus simple est de supprimer l'image au retour de l'appel ajax, mais sans savoir comment ta page est construite, difficile de te proposer quelque chose.

Est-ce que tu peux nous montrer un bout de html de ta page avec l'image ?
Est-ce qu'il y a plusieurs images sur la même page ou une seule ?

L'autre solution est que le PHP te retourne la liste modifiée des images et que tu reconstruises à la volée la page HTML
L'avantage c'est que tu es sûr que ce que tu affiches correspond à ce qu'il y a côté serveur, c'est d'autant plus important si plusieurs personnes peuvent ajouter/supprimer des images en même temps
Le bémol c'est que ça ajoute du code en déportant le rendu en Javascript au lieu de PHP


Rien à voir mais tu peux supprimer l'attribut data de ton appel ajax car dans ton script PHP tu récupères les paramètres passés par l'url (GET)


// ce code fonctionnera de la même manière dans ton cas
$.ajax({
        type:"POST",
        url:"ImageLap.php?file="+file+"&repdossier="+repdossier+"",
        success(html){
        alert('File '+file+' has been deleted');
        }
});
 

Et je me permet aussi un conseil qui est de ne pas mettre de première lettre en majuscule pour ton script PHP
Cette syntaxe est, par convention, réservée aux classes


imageLap.php <-- à la place
 

Bon code

edit : en fait, je n'avais pas fait attention, mais tu peux aussi supprimer le type: "POST" puisqu'au final tu récupères les données en GET

Et puis tu peux préférer l'utilisation des promesses (promises)

ça donnerait :

$.ajax({
        url: "ImageLap.php?file="+file+"&repdossier="+repdossier
}).
then(function (data) {
    alert("Deleted");
})
.then(function(err){
    alert("Failed");
});
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#6 charlydar

  • Guests

Posté 28 October 2016 - 21:48 PM

Je vous remercie des possibilités proposées !
En effet, je préfère utiliser le code Ajax que tu proposes. Comme le formulaire a près de 6000 lignes de code.
Je suis obligé de retiré la partie essentielle pour que nous regardons ensemble son fonctionnement en uploadé file image, puis la suppression de ces fichiers du côté serveur et au niveau de la page web. :deal:
Voici le bout de code que j'ai mis en place pour la suppression du fichier au niveau de la page web. Comme du côté serveur, je n'ai pas de problème. Mais, la suppression n'est pas sélective, plutôt collective s'il y'a plusieurs fichier image. Ci joint le code Ajax:

        $.ajax({
          type:"POST",
          url:"ImageLap.php?file="+file+"&repdossier="+repdossier+"",
          data:{file:file},
          success(html){
//      $('#form4').find('#upload').val('');
          $('#files').find('.success').addClass('hidden'); // Masqué l'image
           alert('File '+file+' has been deleted');
          }
        });
 

le code html, Ajax et JS pour le upload des fichiers:

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#upload');
  var status=$('#status');
  new AjaxUpload(btnUpload, {
<?php
echo "action: 'upload-file.php?repdossier=".$repdossier."',";
?>
   name: 'uploadfile',
   onSubmit: function(file, ext){
         if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                                        // extension is not allowed
         status.text('Les extentions possible sont JPG, PNG ou GIF');
         return false;
        }
        status.html('Envoi en cours <img src="images/loadingup.gif?<?php echo md5(time()); ?>" border="0" height="6" width="19">');
   },
   onComplete: function(file, response){
        //On completion clear the status
        status.text('');
        //Add uploaded file to list
        if(response==="success"){
                                                                                $('<li></li>').appendTo('#files').html('<img src="miniature.php?pic=upload/<?php echo $repdossier; ?>/'+file+'&w_max=70&h_max=60" height="60" width="70" alt="'+file+'" /><span id="link"><input type="hidden" value="'+file+'" name="delete_file" id="delete_file" /><input type="hidden" value="<?php echo $repdossier;?>" name="repdossier" id="repdossier" /><i class="icon-remove-circle" style="cursor: pointer;" onclick="delete_image()"></i></span>').addClass("success");

        }
                                                                 if(response==="error1"){
         alert("Vous avez déjà 5 photos pour votre annonce !\nLe maximum de photos autorisées est de 5 !")
        }
                                                                if(response==="error2"){
                        alert("La photo selectionnée existe déjà\nRe-selectionnez une autre photo !")
        }
   }
  });

});
</script>
 

Le code html qui permet de upload les fichiers :

                                                        <div class="control-group">
                                                          <label class="control-label"><?php //echo $label651 height="128" ;?></label>
                                                          <span >Photos : Une annonce avec photo est plus consulte qu'une annonce sans photo</span>  
                                                          <div class="controls">
                                                          <div id="photomaximum">
                                                          <span id="status" ></span><ul id="files"><li></li></ul>
                                                          </div>
                                                          <div id="upload">
                                                                  <span>Maximum 5 photos</span>
                                                                  <img src="./../assets/img/icon-camera-plus.png" align="absmiddle" width="114" heigth="120" border="0">
                                                          </div>
                                                          </div>
                                                        </div>


#7 charlydar

  • Guests

Posté 28 October 2016 - 21:51 PM

Je vous remercie des possibilités proposées !
En effet, je préfère utiliser le code Ajax que tu proposes. Comme le formulaire a près de 6000 lignes de code.
Je suis obligé de retiré la partie essentielle pour que nous regardons ensemble son fonctionnement en uploadé file image, puis la suppression de ces fichiers du côté serveur et au niveau de la page web. :deal:
Voici le bout de code que j'ai mis en place pour la suppression du fichier au niveau de la page web. Comme du côté serveur, je n'ai pas de problème. Mais, la suppression n'est pas sélective, plutôt collective s'il y'a plusieurs fichier image. Ci joint le code Ajax:

        $.ajax({
          type:"POST",
          url:"ImageLap.php?file="+file+"&repdossier="+repdossier+"",
          data:{file:file},
          success(html){
//      $('#form4').find('#upload').val('');
          $('#files').find('.success').addClass('hidden'); // Masqué l'image
           alert('File '+file+' has been deleted');
          }
        });
 

le code html, Ajax et JS pour le upload des fichiers:

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#upload');
  var status=$('#status');
  new AjaxUpload(btnUpload, {
<?php
echo "action: 'upload-file.php?repdossier=".$repdossier."',";
?>
   name: 'uploadfile',
   onSubmit: function(file, ext){
         if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                                        // extension is not allowed
         status.text('Les extentions possible sont JPG, PNG ou GIF');
         return false;
        }
        status.html('Envoi en cours <img src="images/loadingup.gif?<?php echo md5(time()); ?>" border="0" height="6" width="19">');
   },
   onComplete: function(file, response){
        //On completion clear the status
        status.text('');
        //Add uploaded file to list
        if(response==="success"){
                                                                                $('<li></li>').appendTo('#files').html('<img src="miniature.php?pic=upload/<?php echo $repdossier; ?>/'+file+'&w_max=70&h_max=60" height="60" width="70" alt="'+file+'" /><span id="link"><input type="hidden" value="'+file+'" name="delete_file" id="delete_file" /><input type="hidden" value="<?php echo $repdossier;?>" name="repdossier" id="repdossier" /><i class="icon-remove-circle" style="cursor: pointer;" onclick="delete_image()"></i></span>').addClass("success");

        }
                                                                 if(response==="error1"){
         alert("Vous avez déjà 5 photos pour votre annonce !\nLe maximum de photos autorisées est de 5 !")
        }
                                                                if(response==="error2"){
                        alert("La photo selectionnée existe déjà\nRe-selectionnez une autre photo !")
        }
   }
  });

});
</script>
 

Le code html qui permet de upload les fichiers :

                                                        <div class="control-group">
                                                          <label class="control-label"><?php //echo $label651 height="128" ;?></label>
                                                          <span >Photos : Une annonce avec photo est plus consulte qu'une annonce sans photo</span>  
                                                          <div class="controls">
                                                          <div id="photomaximum">
                                                          <span id="status" ></span><ul id="files"><li></li></ul>
                                                          </div>
                                                          <div id="upload">
                                                                  <span>Maximum 5 photos</span>
                                                                  <img src="./../assets/img/icon-camera-plus.png" align="absmiddle" width="114" heigth="120" border="0">
                                                          </div>
                                                          </div>
                                                        </div>


#8 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 29 October 2016 - 15:45 PM

Salut,

Voici un exemple qui montre la suppression d'une image dans une liste

Ce code n'utilise pas jQuery

Le principe est de chercher l'élément parent (parentNode) de la corbeille et le supprimer

bien entendu, dans ton cas, tu ne supprimeras l'élément qu'une fois la requête ajax terminée si ça c'est bien passé

Pour simuler l'appel ajax, j'utilise un setTimeout de 1,5 secondes

Ici, on est dans le cas où tu construits ta page en PHP et ne fait que supprimer un élément présent en Javascript

Si tu veux un exemple de construction de la page en Javascript avec reconstruction de la liste après suppression, relance le post

En attendant, bon code

https://jsfiddle.net/w9pdyf3u/3/


note : en jQuery, ça devrait ressembler à quelque chose comme ça, mais je n'ai pas testé :


var $busy = $('#busy');

// recherche de toutes les corbeilles (class .del)
$('.del').on('click', function (e){
  if (confirm("Confirm delete ?")) {
    $busy.css('visibility', 'visible');
    // permet de garder la référence au this dans le setTimeout
    var that = this;
    // simule un appel ajax de 2 secondes
    window.setTimeout(function(){
      $busy.css('visibility', 'hidden');
        // supprime le noeud parent de la corbeille
        that.parent().remove();
      }, 1500);
  }
});

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#9 charlydar

  • Guests

Posté 29 October 2016 - 18:23 PM

Ok!
je teste le code proposé, c'est très simple à utiliser. Au faite, je ne sais comment vous faite la rechercher des scripts au niveau de https://jsfiddle.net/ et pourtant ce site nous avais été conseiller pour éviter de créer la roue.
Merci de vos prepositions, j'en suis reconnaissant .
je vous prie de croire à toutes mes sincères salutations !

#10 charlydar

  • Guests

Posté 29 October 2016 - 19:03 PM

Rien à signaler, le code est impeccable.
Merci ! :smile:

#11 charlydar

  • Guests

Posté 16 November 2016 - 20:11 PM

Bonsoir,
j'ai tenté de gérer la compatibilité avec le DOM-0 pour ce script.

        // delete file upoad
        var $busy = document.querySelector('#busy');
        //var file_name = $("#delete_file_name").val();
        var file = $("#delete_file").val();
        var repdossier = $("#repdossier").val();  
        // recherche de toutes les corbeilles (class .del)
        [].forEach.call(document.querySelectorAll('.del'), function (el){
                        // pose un écouteur click sur toutes les corbeilles
                        el.addEventListener('click', function (e) {
                                                $busy.style.visibility = 'visible';
                        // permet de garder la référence au this dans le setTimeout
                        var that = this;
                        // simule un appel ajax de 2 secondes
                                        window.setTimeout(function(){
                                                 $busy.style.visibility = 'hidden';
                          // supprime le noeud parent de la corbeille
                                        that.parentNode.remove();        
                        }, 1500);
          })
        });
        $.ajax({
          url:"imageLap.php?file="+file+"&repdossier="+repdossier+"",
        });
 
Mais, je sèche et je ne sais pas si de votre coté vous y avez penser ?
J’ai vérifié avec les polyfills et wrappers en JS, je ne suis pas encore habitué à les utilisé....
Ainsi, je suis à la recherche de l'aide pour le DOM-0

#12 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 17 November 2016 - 12:00 PM

Salut,

Tu as besoin de gérer quels navigateurs (et dans quelles versions) ?

Le plus simple serait peut-être d'utiliser jQuery ?

ça devrait ressembler à quelque chose dans ce goût là (code non testé)


// delete file upoad
var $busy = $('#busy');
//var file_name = $("#delete_file_name").val();
var file = $("#delete_file").val();
var repdossier = $("#repdossier").val();  
// recherche de toutes les corbeilles (class .del)
$('.del').on('click', function (e) {
        $busy.css('visibility', 'visible');
        window.setTimeout(function(){
                $busy.css('visibility', 'hidden');
                // supprime le noeud parent de la corbeille
                $(e.target).remove();          
        }, 1500);
});


$.ajax({
        url:"imageLap.php?file="+file+"&repdossier="+repdossier+"",
});
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#13 evamaria

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 09 December 2016 - 11:45 AM

Bonjour,
J'ai le même problème "Supprimez le fichier image uplode en utilisant le code d'ajax" . Pouvez-vous m'aider ?

#14 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 11 December 2016 - 19:32 PM

Salut evamaria,

Est-ce que tu peux donner plus de détails et peut-être un morceau de code pour voir où tu en es ?
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP