使用 vanilla JS 從頁面中刪除渲染圖像？

Question

我目前正在設計一個模式，用戶可以一次從他們的系統上傳多個圖像，並將它們顯示在彈出模式中。 其中一個要求是添加一個功能，用戶可以點擊按鈕刪除所有上傳的渲染圖像。我的重置按鈕目前只是清除信息，但不會刪除圖像。 有人有什么想法嗎？ 我的HTML、CSS和JS都在下面：

將來，我需要更改它以允許用戶調用 API 從 AWS S3 服務器獲取圖像然后渲染回屏幕......不確定香草 JS 是否最適合這個？ 我們僅限於使用 HTML、CSS 和 JS。

 function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (/\.(jpe?g|png|gif)$/i.test(file.name)) { var reader = new FileReader(); reader.addEventListener("load", function () { var image = new Image(); //styling in JS // image.height = 160; image.width = 160; image.style.flexDirection = "row"; image.title = file.name; image.src = this.result; preview.appendChild(image); }, false); reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } }

 /* floating buttons: */.floating-btn { width: 80px; height: 80px; background: #0B406D; display: flex; border-radius: 50%; color: white; font-size: 40px; align-items: center; justify-content: center; text-decoration: none; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); position: fixed; right: 120px; bottom: 20px; outline: blue; border: none; cursor: pointer; }.floating-btn:hover { background: #4D89C8; }.floating-btn2 { width: 80px; height: 80px; background: #0B406D; display: flex; border-radius: 50%; color: white; font-size: 40px; align-items: center; justify-content: center; text-decoration: none; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); position: fixed; right: 20px; bottom: 20px; outline: blue; border: none; cursor: pointer; }.floating-btn2:hover { background: #4D89C8; } /*Modal styling: */.modal { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; z-index: 1; displ

 <:--Modal code; --> <div id="simpleModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="closeBtn">&times:</span> <h2>Image search and processing: </h2> </div> <div class="modal-body"> <form id="modal-form" class="form"> <label for="files">Select multiple files: </label> <input id="files" target="_blank" type="file" onchange="previewFiles()" multiple/> <output id="result"> <button type="submit" class="floating-btn" value ="submit">+</button> <button type="reset" class="floating-btn2" value ="reset" onclick="return hideImage()">x</button> </form> </div> <div id="preview"></div> </div> </div>

Answer 1

您可以簡單地.reset() function 在images上傳或預覽后clear / reset您的表單，並使用innerHTML通過單擊hideImage()或按X按鈕清除圖像的preview

現場演示：

 function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (/\.(jpe?g|png|gif)$/i.test(file.name)) { var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); //styling in JS // image.height = 160; image.width = 160; image.style.flexDirection = "row"; image.title = file.name; image.src = this.result; preview.appendChild(image); }, false); reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } } function hideImage() { document.getElementById("modal-form").reset(); //reset form var preview = document.querySelector("#preview"); preview.innerHTML = '' //set preview to null }

 .floating-btn { width: 80px; height: 80px; background: #0B406D; display: flex; border-radius: 50%; color: white; font-size: 40px; align-items: center; justify-content: center; text-decoration: none; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); position: fixed; right: 120px; bottom: 20px; outline: blue; border: none; cursor: pointer; }.floating-btn:hover { background: #4D89C8; }.floating-btn2 { width: 80px; height: 80px; background: #0B406D; display: flex; border-radius: 50%; color: white; font-size: 40px; align-items: center; justify-content: center; text-decoration: none; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); position: fixed; right: 20px; bottom: 20px; outline: blue; border: none; cursor: pointer; }.floating-btn2:hover { background: #4D89C8; } /*Modal styling: */.modal { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; z-index: 1; display: none; justify-content: center; align-items: center; }.modal-content { width: 80%; height: 80%; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px; padding: 20px; margin: 20% auto; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px rgba(0, 0, 0, 0.17); animation-name: modalopen; animation-duration: 1s; flex-direction: column; justify-content: space-around; }.modal-header { font-size: 12pt; color: black; }.modal-header h2 { margin: 0; }.modal-body { width: 33.33%; padding: 5px; }.closeBtn { color: #ccc; float: right; font-size: 50px; }.closeBtn:hover, .closeBtn:focus { color: red; text-decoration: none; cursor: pointer; } @keyframes modalopen { from { opacity: 0 } to { opacity: 1 } } /*Image displaying style: */ form { margin-top: 10px; padding: 5px; border-radius: 4px; margin: 0 auto; } a img { float: left; width: 150px; height: 150px; padding-right: 15px; box-sizing: border-box; } img:hover { transform: scale(1.5); cursor: pointer; }

 <form id="modal-form" class="form"> <label for="files">Select multiple files: </label> <input id="files" target="_blank" type="file" onchange="previewFiles()" multiple /> <div id="result"> <button type="submit" class="floating-btn" value="submit">+</button> <button type="reset" class="floating-btn2" value="reset" onclick="return hideImage()">x</button> </div> </form> <div id="preview"></div>