ASP.NET Razor页面多图选择预览删除功能异常排查

问题根源 #

你的代码出现删除单图后全部文件丢失的核心原因有两个：

1. 原生文件输入框的FileList是只读结构：无法单独移除单个文件，只能通过value = null整体清空所有选中文件。
2. 删除按钮的逻辑错误：你在点击事件里执行了fileInput.value = null，这会直接清空整个输入框的所有选中文件，导致提交时剩下的图片也被一并清除。遍历图片的循环仅用于生成预览DOM，并没有真正管理要提交的文件集合。

解决方案 #

我们需要手动维护一个有效文件数组，用来跟踪用户实际要提交的文件：删除操作仅从数组中移除对应文件并更新预览DOM，不再操作原生file input的value；提交表单时，将数组中的文件通过FormData提交到后端。

修改后的完整代码 #

HTML部分（Razor页面）

<form id="uploadForm" method="post" enctype="multipart/form-data">
    <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" id="previewContainer"></div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

JavaScript部分

// 存储用户确认要提交的有效文件
let validFiles = [];

function previewAdditionalPhotos(event) {
    const previewContainer = document.getElementById('previewContainer');
    const files = Array.from(event.target.files); // 将FileList转为可操作的数组

    files.forEach(file => {
        // 仅处理图片类型文件
        if (!file.type.match('image.*')) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            // 创建预览容器
            const previewDiv = document.createElement('div');
            previewDiv.className = 'preview-item m-2';
            
            // 创建预览图片
            const image = document.createElement('img');
            image.className = 'preview-image img-thumbnail';
            image.src = e.target.result;
            image.style.width = '150px';
            image.style.height = '150px';
            
            // 创建删除按钮
            const removeButton = document.createElement('button');
            removeButton.innerHTML = '删除';
            removeButton.className = 'btn btn-danger btn-sm mt-1';
            
            // 绑定删除逻辑
            removeButton.addEventListener('click', function() {
                // 从有效文件数组中移除当前文件
                validFiles = validFiles.filter(f => f !== file);
                // 移除预览DOM
                previewContainer.removeChild(previewDiv);
            });

            previewDiv.appendChild(image);
            previewDiv.appendChild(removeButton);
            previewContainer.appendChild(previewDiv);
            
            // 将当前文件加入有效数组
            validFiles.push(file);
        };
        reader.readAsDataURL(file);
    });

    // 清空原生输入框，允许重复选择相同文件
    event.target.value = null;
}

// 拦截表单提交，手动组装FormData提交
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData();
    // 把有效文件逐个加入FormData，键名与后端接收参数一致
    validFiles.forEach(file => {
        formData.append('MediaFiles', file, file.name);
    });

    // 用fetch提交表单
    fetch(this.action, {
        method: this.method,
        body: formData,
        headers: {
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        }
    })
    .then(response => {
        if (response.ok) {
            alert('上传成功');
            // 重置状态
            validFiles = [];
            document.getElementById('previewContainer').innerHTML = '';
        } else {
            alert('上传失败');
        }
    })
    .catch(error => {
        console.error('上传出错:', error);
        alert('上传出错');
    });
});

Razor后端代码（.cshtml.cs）

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourNamespace.Pages
{
    public class UploadModel : PageModel
    {
        [BindProperty]
        public List<IFormFile> MediaFiles { get; set; }

        public IActionResult OnPost()
        {
            if (MediaFiles == null || !MediaFiles.Any())
            {
                ModelState.AddModelError("MediaFiles", "请选择要上传的图片");
                return Page();
            }

            // 处理上传文件示例：保存到wwwroot/uploads目录
            var uploadPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
            if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }

            foreach (var file in MediaFiles)
            {
                if (file.Length > 0)
                {
                    var filePath = Path.Combine(uploadPath, file.FileName);
                    using (var stream = new FileStream(filePath, FileMode.Create))
                    {
                        file.CopyTo(stream);
                    }
                }
            }

            return RedirectToPage("Success");
        }
    }
}

关键说明 #

1. 有效文件数组：通过validFiles跟踪用户要提交的文件，删除操作仅修改该数组，不影响原生输入框。
2. 清空输入框value：允许用户重复选择相同文件（默认情况下，已选中的文件再次选择不会触发onchange事件）。
3. FormData提交：手动组装文件集合提交，后端可直接通过[BindProperty]接收，与普通文件上传逻辑一致。

内容的提问来源于stack exchange，提问作者Wolf