1

问题是我在同一个视图中有两种形式。控制器是Users，我对这两种表单有两个操作：编辑和 UploadPhoto。

我一直在使用编辑部分并且它正在工作。现在我想允许用户在同一页面上上传他们的照片。有一个单独的按钮用于保存用户信息和另一个用于保存图片。

在此处输入图像描述

页面模型是@model sportingbiz.Models.ViewModels.UserEditViewModel

第二种形式

<fieldset title="Upload photo">
    <legend>Change Profile Picture</legend>
    <div>
        @using(Html.BeginForm("UploadPhoto", "Users", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <table>
            <tr>
                <td>
                    <img src="@Url.Content("~/Content/images/noprofilepic.jpg")" 
                </td>
                <td>
                    <input type="file" name="photoFile" />
                    <br /><br />
                    <input type="submit" value="Upload" />
                </td>
            </tr>
            </table>                
        }
    </div>
</fieldset>

控制器

public class UsersController : Controller
{
    UsersRepository usersRepo = new UsersRepository();


    [Authorize]
    [HttpPost]
    public void UploadPhoto(HttpPostedFile photoFile)
    {
        if (photoFile == null)
        {
            return;
        }

        if (photoFile.ContentLength <= 0)
        {
            return;
        }

        string filename = Path.GetFileName(photoFile.FileName);
        if (Path.GetExtension(filename) == "")
            return;

    }
}

当我点击上传时，我的页面导航到http://localhost/mvcapp/Users/UploadPhoto一个空白屏幕。我想要的是返回编辑页面，并可能向用户显示文件未上传的错误。像ModelState.IsValid或ModelState.AddModelError

也没有返回相同视图的选项，例如 return View(model)

我这样做错了吗？一些建议是使用 Ajax 上传器或上传器。我还考虑将上传部分放在自己的视图中。PartialView 可以在这方面提供帮助吗

4

3 回答 3

1

尝试像下面那样验证使用 jquery，这将确保用户被迫选择一些文件......

让我们假设您的视图如下

<input type="file" name="Document" id="imgFile" style="height:25px;"/>
<input type="submit" value="Submit" id="btnSubmit"/>

下面是要验证的jquery

$('#imgFile').change(function() {
    if ( ! $('#imgFile').val() ) {
    alert('Chose a file!');
    return false;
 }
});

或者您可以在按钮上执行相同的操作，如下所示

$('#btnSubmit').click(function() {
    if ( ! $('#imgFile').val() ) {
    alert('Chose a file!');
    return false;
 }
});

希望这可以帮助你...

于 2012-10-01T09:05:33.477 回答
1 
[Authorize]
[HttpPost]
public void UploadPhoto(HttpPostedFile photoFile)
{

带有void返回的 Action 很奇怪。让它返回一个ActionResult并确定你想去的每个分支。

[Authorize]
[HttpPost]
public void UploadPhoto(HttpPostedFile photoFile)
{
    if (photoFile == null)
    {
        return RedirectToAction("ErrorPage");
    }
    ...

    var viewModel = ...;   // but your've lost the Edit part
    return View(viewModel);
 }
于 2012-10-01T07:58:04.823 回答
0

你像这样上传你的图像

 public void UploadPhoto(HttpPostedFile photoFile)
 {}

我认为你应该像这样改变你的代码

 public void UploadPhoto(HttpPostedFileBase photoFile)
 {}
于 2012-10-01T09:15:45.583 回答