Question

我正在研究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帮助来实现这个目的？

Answer 1

请参阅下文，了解如何解决问题。

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

创建两个操作方法一来保存数据，然后创建两个上传图像。对于例如保存信息保存数据， UploadPicture 上传图片。
为代码创建部分视图，以显示用户上传的图像。
在您拥有所有html的主视图中，创建一个表单标记并指定action属性以调用 SaveInformation 操作方法。
创建一个需要在图像上传按钮上调用的JQuery函数。首先，您需要在此功能中将动作属性从 SaveInformation 动态更改为 UploadImage ，以便您可以在服务器上传图像。您可以通过编写如下代码来完成此任务：

var action = "/ControllerName/UploadImage";

$("#IdOfYourFormTag").attr("action", action);
现在在同一个函数中编写JQuery ajax调用的代码并提交你的表单，现在它将点击操作方法UploadImage并将服务器上传图像。在相同的操作方法中，UploadImage现在通过传递新的图像路径来更新您的局部视图，并将其作为ajax调用的响应返回，并在JQuery方法中通过处理Ajax调用Success事件来更新局部视图。

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

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

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

这就是全部。希望这会对你有所帮助。

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

编辑：

首先，我想告诉你我没有使用Ajax调用，因为 ajax调用我们将得到null值而不是我们需要上传的文件，因为一些安全目的。 Fileupload工作原理使用普通的post方法或者我们必须使用一些jquery插件。

好的，现在首先看看型号：

在Model I中创建了一个保存文件路径的属性：

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”获取方法，这就是我用来加载我们的主表单。

[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 包含您需要与其他信息一起保存的文件路径。

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

从没有@ HTML.BeginForm的剃刀视图上传图像

1 个答案:

编辑：