1

我正在开发 ASP.NET MVC3 应用程序。我的主要视图只有一个@HTML.BeginForm几乎是我所有的标记。部分原因是我想一次提交所有信息，我有文本、图像等，并且希望在用户单击“保存”时将所有这些都保存下来。

但是，当我处理图像时，我希望用户能够根据需要多次添加/删除图像，但是将永久保存的信息应该是我在表单提交时获得的信息。这就是为什么我寻求一种将图像上传到服务器并在我的视图中显示它们的方法，但我想知道这是否可能在不使用表单的情况下实现。

我猜可能是某种 Ajax。现在我有这个：

<span class="document-image-frame">
        <input type="file" name="file" id="file"/>
        @Html.ActionLink("Upload Picture", "UploadPicture", new { documentID = Model[0].DocumentId })

但那是一周前我最后一次处理这个问题的时候，现在我的控制器声明如下：

public ActionResult UploadPicture(HttpPostedFileBase file, FormCollection collection)
        {
         //code goes here...

正在抛出这个异常：

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.

但我认为这是因为当我@Html.BeginForm对图像使用单独的代码时，这段代码就留下了。

有没有一些 MVC3 方法可以做到这一点，或者我可以使用一些 AJAX 助手来做到这一点？

4

1 回答 1

1

请参阅下面如何处理您的解决方案。

第 1 步：首先在服务器上添加/上传图像

  • 创建两个动作方法，一是保存数据，二是上传图像。例如SaveInformation保存数据和UploadPicture上传图片。

  • 为代码创建一个局部视图以显示用户上传的图像。

  • 在您拥有所有 html 的主视图中，创建一个表单标记并分配 action 属性以调用SaveInformation操作方法。

  • 创建一个 JQuery 函数，您需要在图像上传按钮上调用该函数。在此函数中，首先您需要将动作属性从SaveInformation动态更改为UploadImage，以便您可以将图像上传到服务器。您可以通过编写如下代码来完成此任务：

    var action = "/ControllerName/UploadImage";

    $("#IdOfYourFormTag").attr("action", action);

  • 现在在同一个函数中为 JQuery ajax 调用编写代码并提交您的表单，该表单现在将点击操作方法 UploadImage 并将图像上传到服务器。在同一个操作方法中 UploadImage 现在通过传递新的图像路径来更新您的局部视图并将其作为您的 ajax 调用的响应返回，并在您的 JQuery 方法中通过处理 Ajax 调用成功事件来更新您的局部视图。

另外请在您的表单标签中添加enctype = "multipart/form-data代码和平没有这个，您将无法将您的图像从视图发送到控制器，并且在您的 UploadImage 操作方法中添加一个参数HttpPostedFileBase FileUpload也可以获取文件。

第2步：最后将图像路径永久保存在服务器上

  • 创建一个名称为ImagePath的属性，该属性将存储图像的路径。
  • 在您创建的部分视图中创建一个隐藏文件，以显示您的图像并将其与 ImagePath 属性绑定。将隐藏字段放在这里的想法是在上传图像时它也会使用新的图像路径进行更新。
  • 现在，当您提交表单以更新其余信息时，还可以从此隐藏字段中获取图像路径并将其保存在数据库中。

就这样。希望这会帮助你。

如果您还有任何问题，请随时问我。

编辑：

首先，我想告诉您，我没有使用 Ajax 调用，因为使用ajax 调用我们将获得空值而不是出于某些安全目的我们需要上传的文件。Fileupload 可以使用普通的 post 方法，或者我们必须使用一些 jquery 插件。

好的，现在先看看模型：

在模型中，我创建了一个属性来保存文件路径：

public class InformationModel
{       
    public string ImagePath { get; set; }
    // Your rest of properties
}

看法：

@using (Html.BeginForm("SaveInformation", "Home",null, FormMethod.Post, new { id =   "SaveInformation", enctype = "multipart/form-data" }))
{      
 @Html.HiddenFor(m => m.ImagePath)
<input type="file" name="FileUpload" id="FileUpload" />                   
<input type="button" id="Upload" name="Upload" value="Upload" />    
<input type="submit" id="Submit" name="Submit" value="Submit" /> 
}

在上面的代码中，我刚刚创建了一个表单，该表单具有一个文件上传控件和两个按钮，一个用于上传文件，第二个用于提交整个表单，一个隐藏字段用于保存文件路径。

为了上传文件，我在 jquery 中编写了如下代码：

<script type="text/javascript">
$(document).ready(function () {
    $("input#Upload").click(function () {
        $("#SaveInformation").attr("action", "/Home/UploadImage");
        $("#SaveInformation").submit();
    });
});
</script>

上面的代码只是简单地将表单操作方法从点击更改为UploadImage操作方法而不是SaveInformation操作，并将提交表单。

控制器：

    [HttpPost]
    public ActionResult UploadImage(InformationModel model, HttpPostedFileBase FileUpload)
    {
        //First write your code here to Upload the image
        string path = "/YourVirtualDirectoryPath/"; 
        path = System.IO.Path.Combine(Server.MapPath(path), FileUpload.FileName);
        FileUpload.SaveAs(path);

        model.ImagePath = path;
        //If you need to maintain the entire model you can do it like this or you can just assign the file path to the temp session 
        //and redirect to SaveInformation get method.
        this.TempData["FilePath"] = model;
        return RedirectToAction("SaveInformation");
    }

在上述方法中，我刚刚上传了文件并将图像路径分配给 ImagePath 属性并将模型分配给临时会话数据，以便可以保留模型值并将控件重定向到我用来加载的“SaveInformation”get 方法我们的主要形式。

   [HttpGet]
    public ActionResult SaveInformation()
    {
        InformationModel model = null;
        if (this.TempData["FilePath"] != null)
        {
            model = (InformationModel)TempData["FilePath"];
        }
        else
        {
            model = new InformationModel();
        }
        return View(model);
    }

上面的操作方法包含一个简单的逻辑，如果请求来自 UploadImage 操作方法，那么只需从临时会话数据中填充模型或创建新实例并加载视图。

    [HttpPost]
    public ActionResult SaveInformation(InformationModel model)
    {
        return RedirectToAction("SaveInformation");
    }

上面的方法只是保存所有的值。当您单击提交按钮时，您将看到model.ImagePath包含您需要保存的文件路径以及其余信息。

希望现在你会得到你的问题的解决方案。

于 2013-06-11T05:37:06.340 回答