Question

我有一个文件上载，可以选择多个文件。但是，当我单击提交时，服务器端仅接收最后一个选择。例如，我第一次选择2个图像，然后是3个图像，总共5个图像。提交后，服务器只捕获最后3张图像。我的想法是将所有图像放入一个隐藏的输入中，然后服务器将从隐藏的输入中获取数据。但我不知道如何将它们置于隐藏的输入中。

我的问题是如何将数据图像放入隐藏的输入中？

Answer 1

您可以克隆实际的文件输入。这是一个例子：

型号：

public class MyViewModel
{
    public IEnumerable<HttpPostedFileBase> Files { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

查看：

@model MyViewModel

<script type="text/javascript">
    $(function () {
        $(':file').change(function () {
            if (this.files.length > 0) {
                var real = $(this);
                var cloned = real.clone(true);
                real.hide();
                cloned.insertAfter(real);
                real.appendTo('form');
            }
        });
    });
</script>

@Html.TextBoxFor(x => x.Files, new { type = "file", multiple = "multiple", value = "", id = (string)null })

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <button type="submit">Upload</button>
}

这个想法是原始文件输入在表单之外。然后，每次用户执行文件选择时，我们都会克隆该字段并将其作为隐藏文件输入插入到表单中。提交表单后，所有文件都将上传到服务器。

脚本的进一步改进显然是向用户提供一些可视指示，表明将要上传到服务器的文件数量。

ASP.NET MVC 3中存在单个文件上载问题的多个文件

1 个答案: