选择多个图像、预览它们以及删除单个图像（如果用户不想包含它）的功能

Question

我正在使用 ASP.NET。在此剃刀页面（cshtml）中，我尝试创建一个功能，用户可以选择多个图像，预览它们，以及每个图像的删除按钮。就像我们在Facebook上可以一张一张地添加照片和删除一样。

现在我有这个 html 和 JavaScript 代码。问题是，当我选择 2 个图像 A 和 B 时，我删除图像 A 然后提交表单，图像 B 也消失了。这意味着删除按钮会重置整个文件输入，包括我不打算删除的文件。
这是为什么？我已经有一个 for 循环来迭代每个图像，为什么它会清除整个输入

function previewAdditionalPhotos(event) {
  var previewContainer = document.querySelector('.additional-photos-preview');
  var files = event.target.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (file.type.match('image.*')) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var image = document.createElement('img');
        image.className = 'preview-image';
        image.src = e.target.result;
        var removeButton = document.createElement('button');
        removeButton.innerHTML = 'Remove';
        removeButton.className = 'btn btn-danger remove-button';
        removeButton.addEventListener('click', function() {
          var previewDiv = this.parentNode;
          var fileInput = document.querySelector('input[type="file"]');
          fileInput.value = null;
          previewContainer.removeChild(previewDiv);
        });
        var previewDiv = document.createElement('div');
        previewDiv.appendChild(image);
        previewDiv.appendChild(removeButton);
        previewContainer.appendChild(previewDiv);
      }
      reader.readAsDataURL(file);
    }
  }
}

<div class="form-group photos-group">
  <label asp-for="MediaFiles" class="control-label"></label>
  <input type="file" name="MediaFiles" multiple class="form-control" onchange="previewAdditionalPhotos(event)" />
  <span asp-validation-for="MediaFiles" class="text-danger"></span>
  <div class="additional-photos-preview"></div>
</div>

<div class="form-group">
  <img src="#">
</div>

Answer 1

这是您可以遵循的示例：

<form method="post" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="images" id="fileInput" multiple />
    <div id="previewContainer"></div>
    <button type="submit">Upload Images</button>
</form>
@section Scripts {

        <script>
            let previewedFileNames = [];

        function handleFileSelect(event) {
            const previewContainer = document.getElementById('previewContainer');
            previewContainer.innerHTML = '';
            previewedFileNames = [];

            const files = event.target.files;
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.match('image.*')) {
                    continue;
                }

                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = new Image();
                    img.src = e.target.result;
                    img.width = 100;
                    img.height = 100;

                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = 'Delete';
                    deleteButton.onclick = function () {
                        previewContainer.removeChild(img);
                        previewContainer.removeChild(deleteButton);
                        const index = previewedFileNames.indexOf(file.name);
                        if (index !== -1) {
                            previewedFileNames.splice(index, 1);
                        }
                    };

                    previewContainer.appendChild(img);
                    previewContainer.appendChild(deleteButton);

                    previewedFileNames.push(file.name);
                };
                reader.readAsDataURL(file);
            }
        }

        document.getElementById('fileInput').addEventListener('change', handleFileSelect);

        document.getElementById('uploadForm').addEventListener('submit', function (event) {
            event.preventDefault(); // Prevent the form from submitting normally

            const formData = new FormData();
            const files = document.getElementById('fileInput').files;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (previewedFileNames.includes(file.name)) {
                    formData.append('images', file);
                }
            }

            // Example: Send FormData to backend using fetch API
            fetch('/home/create', {
                method: 'POST',
                body: formData
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.text();
                })
                .then(data => {
                    console.log('Upload successful:', data);
                })
                .catch(error => {
                    console.error('Error during upload:', error);
                });
        });
    
    </script>
}

控制器

[HttpPost]
public IActionResult Create(List<IFormFile> images)
{
    var files = Request.Form.Files;
    return View();
}