如何通过单个添加按钮将多个图像存储在其单个属性中

Question

我创建了一个表单，我通过他们的单个按钮在他们的个人属性中上传图像。但是我想通过单个按钮在他们的个人属性中添加图像。还在上传之前显示图像的预览。它也在 asp.net core mvc 中在上传之前使用一些 jquery 进行图像预览。 我的控制器代码：

 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));
                    }

我的模型代码：

  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>

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>

Answer 1

======================================

我的控制器：

using Microsoft.AspNetCore.Mvc;
using WebAppMvc.Models;

namespace WebAppMvc.Controllers
{
    public class TestController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public string upload(FileModel files)
        {
            return "hello";
        }
    }
}

我的观点，在multiple参数的帮助下，当我点击选择文件按钮时，我可以选择多个图像。然后我通过脚本动态生成html内容以在上传图像时显示预览图像。

@model WebAppMvc.Models.FileModel

<div>
    <div class="form-element">
        <input type="file" id="file-1" asp-for="imge1" name="imge1" multiple>
        <label for="file-1" id="file-1-preview">
        </label>
    </div>
    <button id="btn1">upload</button>
</div>

@section Scripts{
    <script>
        $("#file-1").on("change", function (e) {
            if (e.target.files.length == 0) {
                return;
            }else{
                for(var i=0;i<e.target.files.length;i++){
                    //let index = e.target.files.length - 1;
                    let file = e.target.files[i];
                    let url = URL.createObjectURL(file);
                    console.info("url is " + url);
                    var html = "<div><span>" + file.name + "</span><img src='" + url + "' /></div>";
                    $("#file-1-preview").append(html);
                }
            }
        });

        $("#btn1").click(function(){
            var form = new FormData();
            if ($('#file-1').prop('files').length == 0){
                return;
            }else{
                for (var i = 0; i < $('#file-1').prop('files').length; i++){
                    var temp = i+1;
                    alert(temp);
                    form.append("imge" + temp, $('#file-1').prop('files')[i]);
                    form.append("pic" + temp, "file-name-test" + temp);
                }
            }
            $.ajax({
                url: 'https://localhost:7175/test/upload',
                type: 'POST',
                data: form,
                cache: false,
                contentType: false,//stop jquery auto convert form type to default x-www-form-urlencoded
                processData: false,
                success: function (d) {
                    alert(d)
                }
            });
        })
    </script>
}

我的模型，因为我使用模型作为控制器输入参数，所以它不会接受更多图像。但是模型是由OP提供的：

public class FileModel
    {
        public string? pic1 { get; set; }

        public IFormFile imge1 { get; set; }

        public string? pic2 { get; set; }

        public IFormFile imge2 { get; set; }
    }

测试结果