asp.net-mvc - 如何在 ASP.NET MVC 网站中使用 jQuery / AJAX 上传图像？

Question

我正在尝试找到一种允许用户在编辑个人资料页面上上传个人资料照片的体面方式。

我已经尝试过Uploadify，但这似乎不适用于某些较新的 Google Chrome 浏览器版本。

理想情况下，我只想让用户能够通过一个简单的上传按钮（最好是 ajax），用他们自己的图像替换占位符配置文件图像，并且在上传图像后，显示一个“删除”按钮删除上传的照片并恢复默认占位符图像。

是否有任何其他替代方案可以在所有主要浏览器中很好地运行并轻松集成到 MVC 应用程序中？

Answer 1

仅使用 HTML 5 使用 jQuery 上传，并不是所有的浏览器都能做到这一点。

你可以做这样的事情。

您需要有一个 IFRAME，用于使用该文件发布帖子。

像这样：

<iframe id="targetUpload" name="targetUpload"></iframe>

在表单中，您将目标设置为 iframe。

<form target="targetUpload" name="file" runat="server" method="post" id="file" enctype="multipart/form-data" action="@Url.Content("~/Controller/Upload")">

还有一个提交按钮

<input type="Submit" value="Upload">

这是一种无需刷新页面即可上传文件的方法。

您可以在使用 jquery 上传之前处理文件。（文件类型、大小等...）

在您的控制器中，您接收文件：

public ActionResult Upload(HttpPostedFileBase file)
        {
            if (file != null && file.ContentLength > 0)
            {
                //Save the file in the server path
                string savePath = Server.MapPath("~/Upload/");
                string fileName = file.FileName;
                savePath += fileName;
                file.SaveAs(savePath);
            }
          return RedirectToAction("Index");
        }