在ASP.NET MVC4中使用jQuery拖放上傳文件

Question

我對AJAX的經驗很少（幾乎沒有）。

我想創建一個示例表單，可以在其中上傳圖像文件（想想eBay拍賣），但是可以（並且應該）將這些文件拖放到瀏覽器窗口中，就像將APK上傳到Google Play一樣。

我從來沒有做過這樣的事情，我想學習。 我目前尚無真正的用例來實現，我正在要求它學習 。 因此，讓我們選擇eBay示例。

我的ViewModel可能如下所示：

public class AuctionViewModel {

    public string Title, Description;
    public double Price;
    [...]
    public IEnumerable<Picture> Images; //most important part!
}

public class Picture {
    public string Url; //display URL, perhaps to be generated
    public byte[] payload; //uploaded data
}

問題要點：

1. 控制器的外觀如何？ 我想我需要一個單獨的控制器來上傳AJAX（ViewModel應該存儲在Session中）
2. Javascript客戶端代碼的外觀如何？
3. 在jQuery / AJAX / MVC4中是否有關於可拖放文件的教程？

Answer 1

您可以使用HTML5 File API 。 這將允許您訂閱DOM元素的drop事件，並能夠檢索文件內容並使用XmlHTTPRequest對象將文件異步發送到服務器。 我發布的Mozilla鏈接包含大量示例。

在服務器端，您可以考慮將IEnumerable<HttpPostedFileBase>用作上傳的文件有效負載，而不是byte[] 。 如示例中所示，如果您對AJAX請求使用multipart/form-data內容類型，則默認模型綁定程序將自動將上傳的文件綁定到模型。