Question

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

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

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

以下是控制器：

的代码

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

Follwoing是模型

的代码

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/>

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

在ASP.NET MVC中上载多个图像文件

1 个答案: