如何在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");
        }