如何在 ASP MVC 中上传图片？

Question

我在尝试上传图片时遇到了这个问题。当我点击提交按钮时，我收到以下错误：

索引代码：

当我在没有模态参数的情况下使用它时，它可以工作，但窗口不是模态的，看起来很糟糕。

型号：

public partial class Prod
{
    public string PName { get; set; }
    public byte[] PFile{ get; set; }
}

索引视图：

@using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <p>
       @Html.ActionLink(" ", "Create", "Products", null, new { data_modal = "file", id = "btnCreate", @class = "btn btn-small btn-primary pull-right fa fa-cart-plus" })

       @Html.ActionLink(" ", "Create", "Products", null, new { id = "btnCreate", @class = "btn btn-small btn-primary pull-right fa fa-cart-plus" })
    </p>
}

创建视图：

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

    <div class="modal-body">

        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="form-group">
                @Html.LabelFor(model => model.PFile, "Plik", htmlAttributes: new { @class = "control-label col-md-3" })
                <div class="col-md-9">
                    @Html.TextBoxFor(model => model.PFile, new { type = "file", name = "imageF" })
                    @Html.ValidationMessageFor(model => model.PFile, "", new { @class = "text-danger" })
                </div>
            </div>

        </div>

    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Anuluj</button>
        <input class="btn btn-primary" type="submit" value="Zapisz" />
    </div>
}

控制器：

[HttpPost]        
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Exclude = "PFile")] Prod pro, HttpPostedFileBase imageF)
{                    
    if (ModelState.IsValid)
    {
   
            if (imageF != null)
            {
                pro.PName= imageF.ContentType;
                pro.PFile= new byte[imageF.ContentLength];
                imageF.InputStream.Read(pro.PFile, 0, imageF.ContentLength);
            }

         
             db.Prods.Add(pro);
             db.SaveChanges();
             return Json(new { success = true });
  
    }

    return PartialView("Create", pro);
}

modalform.js

$(function () {

    $.ajaxSetup({ cache: false });

    $("a[data-modal]").on("click", function (e) {

        // hide dropdown if any
        $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');


        $('#myModalContent').load(this.href, function () {


            $('#myModal').modal({
                /*backdrop: 'static',*/
                keyboard: true
            }, 'show');

            bindForm(this);
        });

        return false;
    });


});

function bindForm(dialog) {

    $('form', dialog).submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            contentType: 'multipart/form-data',
            success: function (result) {
                if (result.success) {
                    $('#myModal').modal('hide');
                    //Refresh
                    location.reload();
                } else {
                    $('#myModalContent').html(result);
                    bindForm();
                }
            }
        });
        return false;
    }); 
} 

有什么问题？请帮忙解决这个问题。

Answer 1

抱歉我的英语不好！

使用这种形式，您不需要使用 ajax。确保 PName 有一个隐藏的输入，否则您发送到控制器的模型将无效。我很确定您需要一个 ID 才能在数据库中添加数据，因此将其添加到您的模型中并确保您的变量 pro 具有有效的 id（一个数字）。

试试这个让你的控制器上传文件。确保根据您的需要更改退货线路！ ：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Exclude = "PFile,PName")] Prod pro)
{                    
    if (ModelState.IsValid)
    {    
        try
        {
            if (Request.Files[0] != null && Request.Files[0].ContentLength > 0)
            {
                byte[] tmp = null;
                using (var bin = new BinaryReader(Request.Files[0].InputStream))
                {
                    tmp = bin.ReadBytes(Request.Files[0].ContentLength);
                }
                pro.PName = Request.Files[0].ContentType;
                pro.PFile = tmp;
            }
        }
        catch {
            throw new Exception("There is no file to upload.");
            // TODO Change the exception to this if your want your PFile and PName to be null if there's no file.
           // pro.PName = "";
           // pro.PFile = null;
        }
        db.Prods.Add(pro);
        db.SaveChanges();
        return RedirectToAction("Index", "Whatever");
    }
    return PartialView("Create", pro);
}

Answer 2

请检查这个。首先，您不能通过 ajax 调用发布文件。在服务器端发布文件需要完整的回发。还有一些其他技术可以处理来自 ajax 调用的文件。

检查此代码..

控制器功能。

   public ActionResult Create(Prod pro)
    {
        if (ModelState.IsValid)
        {

            if (pro.PFile != null)
            {
                pro.PName = pro.PFile.ContentType;
                pro.PFileByte = new byte[pro.PFile.ContentLength];
                pro.PFile.InputStream.Read(pro.PFileByte, 0, pro.PFile.ContentLength);
            }


            //db.Prods.Add(pro);
            //db.SaveChanges();
            return Json(new { success = true });
        }
        return PartialView("Create", pro);
    }

视图模型...

public partial class Prod
{
    public string PName { get; set; }
    public byte[] PFileByte { get; set; }
    public HttpPostedFileBase PFile { get; set; }
}

删除您的表单提交功能并检查。如果需要 ajax 调用，请在 cmets 上告诉我。

Answer 3

尝试在 Bind 属性中包含 HttpPostedFileBase 对象的名称。您未放入的任何内容都将从请求中排除。 像这样：

public ActionResult Create([Bind(Exclude = "PFile", Include = "imageF")] Prod pro, HttpPostedFileBase imageF)