Annuler, rétablir, supprimer pour l’image sélectionnée à l’aide de jQuery

Bonjour, j’ai un formulaire de téléchargement d’image. Lorsque vous sélectionnez Télécharger l’image, il affiche également l’aperçu.

$( function() { var inputLocalFont = document.getElementById("user_file"); inputLocalFont.addEventListener("change",previewImages,false); function previewImages(){ var fileList = this.files; var anyWindow = window.URL || window.webkitURL; for(var i = 0; i < fileList.length; i++){ var objectUrl = anyWindow.createObjectURL(fileList[i]); $('.new-multiple').append('
'); window.URL.revokeObjectURL(fileList[i]); } $( ".img-div" ).draggable(); $( ".img-div" ).resizable(); } });
 .new-multiple{ width:400px !important; height:400px !important; background:white; border:2px solid red; overflow:hidden; } .img-div{ width:200px; height:200px; } .newly-added{ width:100%; height:100%; } 
     

J’écris les deux fonctions redimensionnables et glissables pour les images.

Mais est-il possible

(1) lorsque je clique sur une image, elle apparaîtra comme sélectionnée [peut être une ombre supplémentaire pour la sélection, en cliquant également sur une ombre extérieure disparaissent] et

(2) Lorsque j’appuie sur le bouton de suppression du clavier, l’image sélectionnée est supprimée. Quand j’appuie sur le bouton Annuler, il apparaîtra à nouveau?

S’il vous plaît aider.

METTRE À JOUR

  .img-selected{ box-shadow: 1px 2px 6px 6px rgb(206, 206, 206); } $(".newly-added").on("click", function(e) { $(".newly-added").removeClass("img-selected"); $(this).addClass("img-selected"); e.stopPropagation() }); $(document).on("click", function(e) { if ($(e.target).is(".newly-added") === false) { $(".newly-added").removeClass("img-selected"); } }); 

Essaye ça:

J’ai ajouté ce code jQuery

 $(document).on('click','img',function(){ $('img').removeClass('shadow'); $(this).toggleClass("shadow"); }); 

et l’ombre css

 .shadow{ box-shadow: 10px 10px 5px #888888; } 
 $( function() { var inputLocalFont = document.getElementById("user_file"); inputLocalFont.addEventListener("change",previewImages,false); function previewImages(){ var fileList = this.files; var anyWindow = window.URL || window.webkitURL; for(var i = 0; i < fileList.length; i++){ var objectUrl = anyWindow.createObjectURL(fileList[i]); $('.new-multiple').append('
'); window.URL.revokeObjectURL(fileList[i]); } $( ".img-div" ).draggable(); $( ".img-div" ).resizable(); } $(document).on('click','img',function(){ $('img').removeClass('shadow'); $(this).toggleClass("shadow"); }); });
 .new-multiple{ width:400px !important; height:400px !important; background:white; border:2px solid red; overflow:hidden; } .shadow{ box-shadow: 10px 10px 5px #888888; } .img-div{ width:200px; height:200px; } .newly-added{ width:100%; height:100%; }