Desfazer, refazer, excluir para imagem selecionada usando jquery

Oi eu tenho um formulário de upload de imagem, e ao selecionar fazer o upload da imagem, ele irá mostrar a pré-visualização também.

$( 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%; } 
     

Eu escrevo as duas funções redimensionáveis ​​e arrastáveis ​​para as imagens.

Mas existe alguma maneira

(1) quando eu clico em uma imagem ela aparecerá como selecionada [pode ser uma sombra extra para o selecionado, também clicando fora da sombra desaparecer] e

(2) quando eu pressiono o botão delete no teclado, a imagem selecionada é excluída. Quando eu aperto o botão de desfazer, ele aparece de volta?

Por favor ajude.

ATUALIZAR

  .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"); } }); 

Tente isto:

Eu adicionei este código jquery

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

e a sombra 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%; }