在兄弟元素的点击事件中从内存中删除Image()对象—JavaScript

html5 • • 问答

我有一个图像预览器，它使用 JavaScriptImage()对象在用 PHP 处理图像之前预览图像。我有一个包含 'x' SVG 图形的 div，该图形的目标是单击事件以删除图像。

在函数底部的下面代码中，它使用evt.target并基本上删除每个图像所在的父元素，如果用户希望删除图像。

这一切在视觉层面上都可以正常工作，但即使图像被删除（并且它们从 HTML 中删除），当表单上的“提交”元素被单击以上传图像时，仍会处理任何已删除的图像。从我可以收集到的图像存储在内存中并从那里进行处理。

我已经尝试将图像本身（thumbnailElement在 JavaScript 中）设置为 null 并将其 src 属性设置为空字符串，但这不起作用。

防止处理这些已删除的图像预览的最佳方法是什么？

在下面的代码中，我将 'x' 的 SVG 图形换成了字母 'x' 以使其更易于阅读。

注意：我已经在下面展示了整个图像上传器 - 但它是下面 JS 的最后一部分，// Delete Images这是我需要帮助的部分。

代码笔：https ://codepen.io/emilychews/pen/WNjZVGZ

const dropZone = document.getElementById('drop-zone'),
    showSelectedImages = document.getElementById('show-selected-images'),
    fileUploader = document.getElementById('standard-upload-files')  

dropZone.addEventListener("click", (evt) => {
    // assigns the dropzone to the hidden input element so when you click 'select files' it brings up a file picker window
    fileUploader.click();
});

// Prevent browser default when draging over
dropZone.addEventListener("dragover", (evt) => {
    evt.preventDefault();
});

fileUploader.addEventListener("change", (evt) => {
    // Clear the already selected images
    showSelectedImages.innerHTML = "";
    // this function is further down but declared here and shows a thumbnail of the image
    [...fileUploader.files].forEach(updateThumbnail);
});

dropZone.addEventListener("drop", (evt) => {
    evt.preventDefault();
    // Clear the already selected images
    showSelectedImages.innerHTML = "";

    // assign dropped files to the hidden input element
    if (evt.dataTransfer.files.length) {
        fileUploader.files = evt.dataTransfer.files;
    }

    // function is declared here but written further down
    [...evt.dataTransfer.files].forEach(updateThumbnail);


});

// updateThumbnail function that needs to be able to handle multiple files
function updateThumbnail(file) {
    
    if (file.type.startsWith("image/")) {

        const uploadImageWrapper = document.createElement('article'),
        removeImage = document.createElement('div'),
        thumbnailElement = new Image();

        // 'x' that deletes the image
        removeImage.classList.add("remove-image");
        removeImage.innerHTML = 'x';

        // image thumbnail
        thumbnailElement.classList.add("drop-zone__thumb");
        thumbnailElement.src = URL.createObjectURL(file);

        // appending elements
        showSelectedImages.append(uploadImageWrapper)   // <article> element
        uploadImageWrapper.append(removeImage)          // 'x' to delete
        uploadImageWrapper.append(thumbnailElement);    // image thumbnail
        
        // Delete images

        removeImage.addEventListener('click', (evt) => {
            if(evt.target) {
                var deleteImage = removeImage.closest('article');
                deleteImage.remove()
            }
        })
    }

} // end of 'updateThumbnail' function
body {
  margin: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

form {
  width: 30%;
}

#drop-zone {
  border: 1px dashed;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
}

.select-files {
  text-decoration: underline;
  cursor: pointer;
}

/* image that is preview prior to form submit*/
.drop-zone__thumb {
  width: 200px;
  height: auto;
  display: block;
}

#remove-x {
  width: 1rem;
  height: 1rem;
}

#submit-images {
  margin: 1rem 0;
}

#show-selected-images {
  display: flex;
}
<form enctype="multipart/form-data" method="post">
  <h1>Upload Your Images</h1>
  <div>
    <p>DRAG AND DROP IMAGES HERE</p>
    <p>Or</p>
    <p>Select Files</p>
  </div>
  <input type="file" name="standard-upload-files[]" multiple>
  <input type="submit" name="submit-images" value="SUBMIT IMAGES">
  <div></div>
</form>
以上是在兄弟元素的点击事件中从内存中删除Image()对象—JavaScript的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容