在 ASP.NET MVC 中上传多个图像文件答案

【问题标题】：Multiple Image Files Upload In ASP.NET MVC在 ASP.NET MVC 中上传多个图像文件
【发布时间】：2018-09-04 13:07:33
【问题描述】：

我正在尝试上传多张图片，然后将它们存储在数据库中。

问题是所有图像都保存在图像文件夹中。但在数据库中，显示的是最后上传的图片的名称。

例如，如果我上传了 3 张图片 1 2 和 3。三张图片都将保存在文件夹中，但只有最后一张上传的图片名称显示在数据库中。

以下是Controller的代码：

public ActionResult Create(IEnumerable<HttpPostedFileBase> files)
{
    foreach (var filed in files)        
    {
        if (filed != null && filed.ContentLength > 0)
        {
            var gphoto = new PkgPhotoGallery
            {
                FileName = Guid.NewGuid().ToString() + Path.GetExtension(filed.FileName),
                FileType = FileType.Image
            };
            filed.SaveAs(Path.Combine(Server.MapPath("~/PackagePhotoGallery"), gphoto.FileName));
            packages.PkgPhotoGalleries = new List<PkgPhotoGallery>();   
            packages.PkgPhotoGalleries.Add(gphoto);
        }
    }
    db.Packages.Add(packages);
    db.SaveChanges();
    return RedirectToAction("Index");
}

下面是Model

的代码

public class PkgPhotoGallery
{
    [Key]
    public int FileId { get; set; }
    public  string FileName { get; set; }
    public  FileType FileType { get; set; }
    public int? PackageId { get; set; }
    public virtual Packages Packages { get; set; }
}

查看代码

<input type="file" name="files"  multiple/>

【问题讨论】：

因为您在foreach 循环的每次迭代中都初始化了一个新的new List<PkgPhotoGallery>(); - 您需要在循环之前对其进行初始化并在循环内添加项目
谢谢。它没有注意到这一点。

标签： asp.net-mvc file-upload image-upload

【解决方案1】：

使用这个 jQuery 插件

只包含插件js文件，创建标签：

<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" />

（除了 IE9 不允许在选择对话框中选择多个文件）

添加一些 JavaScript：

$(function () {
$('#fileUpload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
});
});

在控制器操作中，只需检查 Request.Files 并做任何你想做的事情。这是一个很好的文档

[HttpPost]
public JsonResult Upload() 
{
foreach (var file in Request.Files)
{
    if(file.ContentLength > 0)
    {
        file.SaveAs(Server.MapPath("~/Upload/" + file.FileName));
    }
}

return Json(new { result = true });
}

【讨论】：

这与问题无关！