ASP.NET Core使用spartan-multi-image-picker上传多图仅单张提交求助

问题根源梳理 #

• 1. DOM ID重复：插件模板中所有上传控件都使用了相同的id="ImageName"，ID选择器$('#ImageName')仅能匹配到页面中第一个出现的上传控件，因此只能获取到第一张图。
• 2. 未遍历所有上传控件：现有提交代码仅读取了第一个控件的第一个文件，没有遍历所有生成的上传控件读取文件。
• 3. FormData追加逻辑错误：仅追加了单个文件，没有按ASP.NET Core集合绑定规则追加全部选中的文件。

修复步骤 #

1. 修正提交代码的文件读取逻辑 #

替换原有的单文件append逻辑，遍历所有带有spartan_image_input类的文件控件，逐个读取文件追加到FormData即可：

// 清空原有可能存在的ImagesGallery冗余数据
Form_Data.delete("ImagesGallery");
// 遍历所有多图上传控件
$(".spartan_image_input").each(function(index, inputEl) {
    // 仅追加已选择文件的控件
    if(inputEl.files.length > 0) {
        // 多次追加同名key，ASP.NET Core会自动绑定到IEnumerable<IFormFile>集合
        Form_Data.append("ImagesGallery", inputEl.files[0]);
    }
});

// 原有AJAX逻辑保持不变
$.ajax({
    url: '/AdminPanel/Product/AddAndUpdateProduct',
    data: Form_Data,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function (data) {
    // 你的后续业务逻辑
    }
});

2. 可选优化：修正插件模板的重复ID问题 #

避免后续DOM操作出现异常，可修改插件核心模板中的ID生成逻辑，加入动态索引保证唯一：

// 将原模板中的id = "ImageName"改为带索引的格式
`<input id = "ImageName_${count}" class="form-control gallery__product spartan_image_input" accept="image/*" data-spartanindexinput="${count}" style="display : none"  name="${fieldName}" type="file">`

你的原有视图模型、控制器代码无需调整，ASP.NET Core默认支持将FormData中同名的多个文件自动绑定到IEnumerable<IFormFile>类型的属性上，修复提交逻辑后即可正常拿到全部上传的图片集合。

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