C# 使用MVC3以相同形式上载多个图像

以下是我的控制器代码和我的视图：

@using (Html.BeginForm("Create", "Product", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    @Html.ValidationSummary()

    <div class="form-field">
        <p>@Html.LabelFor(m => m.Name)</p>
        @Html.EditorFor(m => m.Name)
    </div>

    <div class="form-field">
        <p>@Html.LabelFor(m => m.Description)</p>
        @Html.EditorFor(m => m.Description)
    </div>

    <div class="form-field">
        <p>@Html.LabelFor(m => m.UnitPrice)</p>
        @Html.EditorFor(m => m.UnitPrice)
    </div>

    <div class="form-field">
        <input type="file" name="image1" />
        <input type="file" name="image2" />
        <input type="file" name="image3" />
    </div>

    <div class="form-field">
        <input type="submit" value="Create" />
    </div>
}

---

如果你能提供一个非常简单的例子，那就太棒了。

看看这两篇文章，它们可能会有所帮助

---

好的，这是一个简单的例子，说明如何做到这一点。最终结果是：

HTML标记是一个简单的表单，带有提交按钮

@using (Html.BeginForm("Create", "Product", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    @Html.ValidationSummary()

    <div class="form-field">
        <p>Select pictures:</p>
        <div class="upload-container">
            <div class="upload">
                <input type="file" name="files" id="file1" /> 
                <img src="@Url.Content("~/Public/images/delete.png")" alt="Remove picture." />
            </div>
        </div>        
    </div>

    <div class="form-field">
        <input type="submit" value="Create" />
    </div>
}

@使用（Html.BeginForm（“Create”、“Product”、FormMethod.Post、new{enctype=“multipart/formdata”}））{
@Html.ValidationSummary（）
选择图片：

}

我们还需要一些jQuery魔法，以便每次有人添加图像时，我们也让他们根据需要添加更多。用户可以上载N个图像

<script type="text/javascript">
    $(document).ready(function () {
        var currentImage = 1;
        $("body").on("change", "input[name='files']", function () {
            var pathToRemoveIcon = "@Url.Content("~/Public/images/delete.png")";
            currentImage = currentImage + 1;
            var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>';
            $('.upload-container').append(htmlToAppend);
        }).on("click", ".upload img", function () {
            if ($(this).parent().siblings().length > 0) {
                $(this).parent().remove();    
            }
        });
    });
</script>

$（文档）.ready（函数（）{
var-currentImage=1；
$（“body”）。在（“更改”、“输入[name='files']”上，函数（）{
var pathToRemoveIcon=“@Url.Content”（~/Public/images/delete.png”）；
currentImage=currentImage+1；
var htmlToAppend=''；
$（'.upload container'）.append（htmlToAppend）；
}).on（“单击“，”.upload img”），函数（）{
if（$（this.parent（）.sibbines（）.length>0）{
$（this.parent（）.remove（）；
}
});
});

最后是控制器代码：

[HttpPost]
public ActionResult Create(IEnumerable<HttpPostedFileBase> files)
{
    try
    {
        if (ModelState.IsValid)
        {
            //Persist the files uploaded.
        }
        return RedirectToAction("Index");
    }
    catch
    {
        return View(model);
    }
}

[HttpPost]
公共操作结果创建（IEnumerable文件）
{
尝试
{
if（ModelState.IsValid）
{
//保存上传的文件。
}
返回操作（“索引”）；
}
抓住
{
返回视图（模型）；
}
}

原来我只需要修改视图代码以使用HttpPostFile集合的名称。现在，这里的协议是什么，我是否回答我自己的问题？如果没有发布的答案给你正确的答案，是的，请发布你自己的答案并标记。如果其中一个答案与你想要的非常接近，那么在评论中给出缺失的地方，或者编辑答案本身并标记它。在你的OP上，你有名字、描述和单价。您是如何将这些与图片一起纳入视图和控制器操作的？感谢您提供了一种简单的跨浏览器兼容方式！

[HttpPost]
public ActionResult Create(IEnumerable<HttpPostedFileBase> files)
{
    try
    {
        if (ModelState.IsValid)
        {
            //Persist the files uploaded.
        }
        return RedirectToAction("Index");
    }
    catch
    {
        return View(model);
    }
}