ASP.NET Core MVC实现单按钮多图上传至独立属性并预览

需求 #

原本通过独立按钮将图片上传至对应独立属性，现需改为单个按钮完成多图上传至各自独立属性，同时实现上传前图片预览，已完成部分jQuery预览逻辑。

现有代码 #

控制器代码（C#） #

if(ar.imge1 != null)
{
    string folder = "image/";
    folder += Guid.NewGuid().ToString() + "_"+ar.imge1.FileName ;

    ar.pic1 ="/"+folder;

    string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
    ar.imge1.CopyTo(new FileStream(serverFolder, FileMode.Create));
}
if (ar.imge2 != null)
{
    string folder = "image/";
    folder += Guid.NewGuid().ToString() + "_" + ar.imge2.FileName;

    ar.pic2 = "/" + folder;
    string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
    ar.imge2.CopyTo(new FileStream(serverFolder, FileMode.Create));
}
if (ar.imge3 != null)
{
    string folder = "image/";
    folder += Guid.NewGuid().ToString() + "_" + ar.imge3.FileName;
    ar.pic3 = "/" + folder;
    string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
    ar.imge3.CopyTo(new FileStream(serverFolder, FileMode.Create));
}

模型代码（C#） #

public string? pic1 { get; set; }
public IFormFile imge1 { get; set; }

public string? pic2 { get; set; }
public IFormFile imge2 { get; set; }

public string? pic3 { get; set; }
public IFormFile imge3 { get; set; }

HTML代码 #

<div class="form">
    <div class="grid">
        <div class="form-element">
            <input type="file" id="file-1" asp-for="imge1" name="imge1">
            <label for="file-1" id="file-1-preview">
                <div>
                    <span>+</span>
                </div>
            </label>
        </div>
        <div class="form-element">
            <input type="file" id="file-2" asp-for="imge2" name="imge2">
            <label for="file-2" id="file-2-preview">
                <div>
                    <span>+</span>
                </div>
            </label>
        </div>
        <div class="form-element">
            <input type="file" id="file-3" asp-for="imge3" name="imge3">
            <label for="file-3" id="file-3-preview">
                <div>
                    <span>+</span>
                </div>
            </label>
        </div>
    </div>
</div>

jQuery代码 #

<script>
function previewBeforeUpload(id){
  document.querySelector("#"+id).addEventListener("change",function(e){
    if(e.target.files.length == 0){
      return;
    }
    let file = e.target.files[0];
    let url = URL.createObjectURL(file);
    document.querySelector("#"+id+"-preview div").innerText = file.name;
    document.querySelector("#"+id+"-preview img").src = url;
  });
}

previewBeforeUpload("file-1");
previewBeforeUpload("file-2");
previewBeforeUpload("file-3");
</script>

完整修改方案 #

1. HTML调整（关键：表单属性+预览元素+统一提交按钮） #

<!-- 必须添加enctype="multipart/form-data"才能上传文件 -->
<form asp-action="YourActionName" method="post" enctype="multipart/form-data">
    <div class="form">
        <div class="grid">
            <!-- 图片1上传区 -->
            <div class="form-element">
                <input type="file" id="file-1" asp-for="imge1" name="imge1" accept="image/*">
                <label for="file-1" id="file-1-preview">
                    <!-- 添加img标签用于预览 -->
                    <img src="" style="display:none; width:100%; height:auto;" />
                    <div>
                        <span>+</span>
                    </div>
                </label>
            </div>
            <!-- 图片2上传区 -->
            <div class="form-element">
                <input type="file" id="file-2" asp-for="imge2" name="imge2" accept="image/*">
                <label for="file-2" id="file-2-preview">
                    <img src="" style="display:none; width:100%; height:auto;" />
                    <div>
                        <span>+</span>
                    </div>
                </label>
            </div>
            <!-- 图片3上传区 -->
            <div class="form-element">
                <input type="file" id="file-3" asp-for="imge3" name="imge3" accept="image/*">
                <label for="file-3" id="file-3-preview">
                    <img src="" style="display:none; width:100%; height:auto;" />
                    <div>
                        <span>+</span>
                    </div>
                </label>
            </div>
        </div>
        <!-- 统一提交按钮 -->
        <button type="submit" class="submit-btn">上传所有图片</button>
    </div>
</form>

2. jQuery预览逻辑完善（修复元素查找+优化交互） #

<script>
// 统一处理预览逻辑
function initImagePreview(fileInputId) {
    const input = document.getElementById(fileInputId);
    const previewContainer = document.getElementById(`${fileInputId}-preview`);
    const previewImg = previewContainer.querySelector('img');
    const placeholder = previewContainer.querySelector('div');

    input.addEventListener('change', function(e) {
        if (!e.target.files || e.target.files.length === 0) {
            // 清空预览
            previewImg.style.display = 'none';
            placeholder.style.display = 'block';
            placeholder.querySelector('span').textContent = '+';
            return;
        }

        const file = e.target.files[0];
        // 仅处理图片文件
        if (!file.type.startsWith('image/')) {
            alert('请选择图片文件');
            input.value = '';
            return;
        }

        const url = URL.createObjectURL(file);
        // 更新预览
        previewImg.src = url;
        previewImg.style.display = 'block';
        placeholder.style.display = 'none';
        // 可选：显示文件名
        placeholder.querySelector('span').textContent = file.name;
    });
}

// 初始化所有预览
['file-1', 'file-2', 'file-3'].forEach(id => initImagePreview(id));
</script>

3. 控制器代码优化（提取重复逻辑） #

private readonly IWebHostEnvironment _webHostEnv;

// 构造函数注入IWebHostEnvironment
public YourController(IWebHostEnvironment webHostEnv)
{
    _webHostEnv = webHostEnv;
}

[HttpPost]
public IActionResult YourActionName(YourModel ar)
{
    // 提取文件保存逻辑为私有方法
    ar.pic1 = SaveImage(ar.imge1);
    ar.pic2 = SaveImage(ar.imge2);
    ar.pic3 = SaveImage(ar.imge3);

    // 后续业务逻辑：比如保存模型到数据库
    // _dbContext.Add(ar);
    // await _dbContext.SaveChangesAsync();

    return RedirectToAction("Index");
}

// 私有方法：统一处理图片保存
private string? SaveImage(IFormFile? imageFile)
{
    if (imageFile == null || imageFile.Length == 0)
        return null;

    // 确保image文件夹存在
    var uploadsFolder = Path.Combine(_webHostEnv.WebRootPath, "image");
    if (!Directory.Exists(uploadsFolder))
        Directory.CreateDirectory(uploadsFolder);

    // 生成唯一文件名
    var uniqueFileName = $"{Guid.NewGuid()}_{Path.GetFileName(imageFile.FileName)}";
    var filePath = Path.Combine(uploadsFolder, uniqueFileName);

    // 保存文件
    using var stream = new FileStream(filePath, FileMode.Create);
    imageFile.CopyTo(stream);

    // 返回相对路径
    return $"/image/{uniqueFileName}";
}

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