Question

我有用于图像预览的代码，但是删除后，它仅来自预览，而不来自url变量，并且删除的图像url也存储在数据库中。

我将Spring Boot用于控制器。

how to remove the image while clicking the remove button and also uploaded link from the uploaded files list

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function(e) {
          var files = e.target.files,
            filesLength = files.length;
          for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {
              var file = e.target;
              $("<span class=\"pip\">" +
                "<img class=\"imageThumb\" src=\"" + e.target.result + "\"title=\"" + file.name + "\"/>" +
                "<br/><span class=\"remove\">Remove image</span>" +
                "</span>").insertAfter("#files");
              $(".remove").click(function() {
                $(this).parent(".pip").remove();
              });

            });
            fileReader.readAsDataURL(f);
          }
        });
      } else {
        alert("Your browser doesn't support to File API")
      }
    });
  </script>
  <style>
    input[type="file"] {
      display: block;
    }
    
    .imageThumb {
      max-height: 75px;
      border: 2px solid;
      padding: 1px;
      cursor: pointer;
    }
    
    .pip {
      display: inline-block;
      margin: 10px 10px 0 0;
    }
    
    .remove {
      display: block;
      background: #444;
      border: 1px solid black;
      color: white;
      text-align: center;
      cursor: pointer;
    }
    
    .remove:hover {
      background: white;
      color: black;
    }
  </style>
</head>
<body>
  <div class="field" align="left">
    <h3>Upload your images</h3>
    <input type="file" id="files" multiple="multiple" />
  </div>
</body>
</html>

请帮助如何从预览以及从保存到数据库的pojo变量中删除图像。

Answer 1

也要清空输入文件字段

 $(".remove").click(function(){
 $(this).parent(".pip").remove();
 $("#files").val(null);
});`

上传前如何从预览以及url变量中删除所选图像

1 个答案: