无法将View中的HttpPostedFileBase传递给Action方法

时间:2017-03-05 22:13:53

标签: asp.net-mvc

在我看来,我有一个图像元素如下:

<img id="ImageDisplay" class="img-thumbnail" width="280" height="280" 
                         src="@Url.Action("GetFileFromHttpPostedFile", "Image", new { File = Model.File })"/>

当我调试代码时,我可以看到我的Model.File不为null。但是当我将它传递给action方法时,action方法将参数作为null接收。这是我的行动方法:

public FileContentResult GetFileFromHttpPostedFile(HttpPostedFileBase File)
{
    byte[] imageData = new byte[File.ContentLength];
    File.InputStream.Read(imageData, 0, File.ContentLength);
    return GetFileFromData(imageData, File.ContentType);
}

我错过了什么吗?我们不能将HttpPostedFileBase传递给方法吗?请帮助。

编辑: 我在视图中还有以下元素,允许用户填充Model.File属性:

<input type="file" name="File" id="File" onchange="loadFile(event)" />

loadFile(event)只是在视图上显示图片的预览。

编辑2:以下是视图的完整代码:

@model MyProject.Models.ViewModels.ChangeProfileModel

@{
    ViewBag.Title = "Change Your Profile";
}

<script>
    $(document).ready(function () {
        $('textarea').keyup(updateCount);
        $('textarea').keydown(updateCount);

        function updateCount() {
            var cs = [500 - $(this).val().length];
            $('#characters').text(cs);
        }
    });

    var loadFile = function (event) {
        var output = document.getElementById('ImageDisplay');

        if (output != null) {
            output.src = URL.createObjectURL(event.target.files[0]);
        }
    };
</script>

<h2>Change Your Profile Info</h2>

@using (Html.BeginForm("ChangeProfile", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    if (ViewBag.ChangesSaved == true)
    {
        <div class="alert alert-success">
            Your changes have been saved successfully! 
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        </div>
    }

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

        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">Select an Image </label>
            <div class="col-md-10">
                <input type="file" name="File" id="File" onchange="loadFile(event)" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2"></label>
            <div class="col-md-10">
                @if (Model.File == null)
                {
                    <img id="ImageDisplay" class="img-thumbnail" width="280" height="280" 
                         src="@Url.Action("GetImageByUser", "Image", new { id = Model.Id })"/>
                }
                else
                {
                    <img id="ImageDisplay" class="img-thumbnail" width="280" height="280" 
                         src="@Url.Action("GetFileFromHttpPostedFile", "Image", new { File = Model.File })"/>
                }
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(m => m.About, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextAreaFor(m => m.About, new { @class = "form-control", @rows = "5", @maxlength = 500 })
                <span id="characters" style="color:#999;">500</span> <span style="color:#999;">characters left</span>
                @Html.ValidationMessageFor(model => model.About, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />  
                @Html.ActionLink("Cancel", "Index", "Manage", null, new { @class = "btn btn-default" })
            </div>
        </div>
    </div>
}

在我的HomeController中,我有以下方法:

public ActionResult ChangeProfile()
    {
        var userId = User.Identity.GetUserId();
        var loggedInUser = UserManager.FindById(userId);

        ChangeProfileModel viewModel = new ChangeProfileModel
        {
            Id = userId,
            City = loggedInUser.City,
            Country = loggedInUser.Country,
            About = loggedInUser.About
        };

        return View(viewModel);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult ChangeProfile(ChangeProfileModel viewModel)
    {
        if (!ModelState.IsValid)
        {
            return View(viewModel);
        }

        var userId = User.Identity.GetUserId();
        var loggedInUser = UserManager.FindById(userId);
        byte[] imageData = null;

        if (viewModel.File != null)
        {
            imageData = new byte[viewModel.File.ContentLength];
            viewModel.File.InputStream.Read(imageData, 0, viewModel.File.ContentLength);
        }

        _aspNetUserRepository.EditUserInfo(userId, viewModel.City, viewModel.Country, viewModel.About,
            imageData, (viewModel.File == null) ? null: viewModel.File.ContentType);

        ViewBag.ChangesSaved = true;

        return View(viewModel);
    }

最后,这是我在ImageController中的最后一个相关操作方法:

public FileContentResult GetFileFromHttpPostedFile(HttpPostedFileBase File)
    {
        byte[] imageData = new byte[File.ContentLength];
        File.InputStream.Read(imageData, 0, File.ContentLength);
        return GetFileFromData(imageData, File.ContentType);
    }

0 个答案:

没有答案