mvc多图片上传

时间:2015-08-28 10:30:28

标签: javascript jquery asp.net-mvc

我有一个类似的模型:

public class CarpetM
{
   public long ID { get; set; }
   public string Name { get; set; }
}

我对添加新地毯的看法如下:

@model MVC_WebApp.Models.CarpetM

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_ManageLayout.cshtml";
}

<h2>Create New Carpet</h2>


    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            @Html.ValidationSummary(true)
            @Html.HiddenFor(model => model.ID)
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.Name)
                        <div class="col-md-10">
                            @Html.TextBoxFor(model => model.Name)
                            @Html.ValidationMessageFor(model => model.Name)
                        </div>
                    </div>
              </div>
           </div>
        <div class="col-sm-6">


             <input type="file" accept="image/*" onchange="loadFile(event)" multiple />
             <div id="images_prev">


              </div>



         </div>

         <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Submit" class="btn btn-default" />
                </div>
        </div>

}

我想为一个地毯选择多个图像并根据服务器上地毯的IDCarpetsImages路径保存它们,所以我将下面的java脚本代码添加到我的视图文件中:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        var image_index = 1;

        var loadFile = function (event) {

            for (i = 0; i < event.target.files.length; i++) {
                $('#images_prev').prepend('<img width="150px" height="220px" src="' + URL.createObjectURL(event.target.files[i]) + '" /><input type="hidden" name="img' + image_index.toString() + '" value="' + event.target.files[i] + '"/>');
            }

        };
    </script>
    }

和mu控制器动作是:

 public ActionResult Create([Bind(Include="ID,Name")] CarpetM carpetm)
        {

            if (ModelState.IsValid)
            {
                db.Carpets.Add(carpetm);
                db.SaveChanges();
                return RedirectToAction("Index");
            }


            return View(carpetm);
        }

现在:如何将客户端浏览器中的选定图像保存到我的服务器目录?如何获得上述动作的图像?

0 个答案:

没有答案