使用jquery撤消，重做，删除所选图像 [英] Undo , redo , delete for selected image using jquery

问题描述

您好，我有一张图片上传表格，选择上传图片时，它也会显示预览.

Hi i have an image upload form , and when selecting upload the image it will show the preview also.

$( 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('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
                  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%;
} 

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input   name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">

 <div class="new-multiple"></div>

我为图像编写了两个可调整大小的可拖动功能.

I write both resizable, draggable function for the images .

但是有什么办法

(1)当我单击一张图像时，它会显示为选中状态[可能是所选图像的额外阴影，也可能单击外部阴影消失]和

(1) when i click on one image it will appear as selected [ may be an extra shadow for the selected , also clicking outside shadow disappear ] and

(2)当我按键盘上的Delete按钮，然后删除所选的图像.当我按下撤消按钮时，它会回来吗?

(2)when i press delete button in keyboard then selected image is deleted . When i press undo button then it will appear back ?

请帮助.

更新

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

推荐答案

尝试一下:

我添加了这个jQuery代码

I added this jquery code

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

和阴影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('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
                  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%;
} 

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">

 <div class="new-multiple"></div>

这篇关于使用jquery撤消，重做，删除所选图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！