Загрузка нескольких изображений в одной форме с использованием MVC3

Question

Вот мой код контроллера, а также мой вид:

@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>
}

И в контроллере.Не сосредотачивайтесь на содержании метода действия, просто сосредоточьтесь на параметре типа List<HttpPostedFileBase>.Это правильный способ делать вещи?На самом деле, images является нулевым при отправке формы.

[HttpPost]
public ActionResult Create(ProductModel model, List<HttpPostedFileBase> images)
{
    try
    {
        if (ModelState.IsValid)
        {
            var newProduct = Mapper.Map<ProductModel, Product>(model);
            _productRepository.CreateProduct(newProduct);
            _productRepository.SaveChanges();
        }
        return RedirectToAction("Index");
    }
    catch
    {
        return View(model);
    }
}

Если бы вы могли привести очень простой пример, который был бы фантастическим.

Answer 1

ОК, так что это простой пример того, как это сделать. Конечный результат:

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

Нам также нужно немного магии 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>

И, наконец, код контроллера:

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

Answer 2

Посмотрите на эти два сообщения, они могут помочь

ASP.NET MVC: привязка нескольких файлов к массиву

Загрузка файла (или файлов) с помощью ASP.NET MVC