jqueryとasp.netを使用して単一の画像をアップロードし、そのサムネイルを表示するmvc3

Question

asp.net mvc3の剃刀のビューから詳細を持つユーザーの写真をアップロードする必要があります。ユーザーが選択した画像は、フォームを送信する前にサムネイルとして表示する必要があります。

ビューのモデルには、Photoというバイト配列プロパティが含まれています。ページの負荷では、私はこのバイト配列を64文字列に変換して表示しています。これは適切に機能しています。

ここでは、ユーザーが選択した画像のサムネイルを表示する必要があります。そして、投稿ボタンをクリックすると、選択した画像をモデルプロパティPhotoにバインドする必要があります。

グーグルでは、画像をアップロードするまでサムネイルを表示できないことを知りました。私はUploadifyを試みましたが、そのUIの動作は私が期待しているものではありません。私も記事http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3.aspxを試しましたが、このシナリオでは適切ではありません。

このシナリオを達成した経験を共有することで、誰でも助けてくれますか？

ありがとうございます。

Answer 1

これはHTML5 File APIを使用して実現できます。 following article、具体的にはをご覧ください。ユーザーが選択した画像のサムネイルを表示セクションに、画像をサーバーにアップロードせずに達成する方法の例を示します。

まだHTML5ファイルAPIをサポートしていないレガシーブラウザをサポートしたい場合は、jQuery.form pluginを使用すると、AJAXを使用して特定のフォームのコンテンツをサーバーに簡単に送信でき、file uploadsもサポートされます。だから、基本的には、ファイルの入力または一部参照サムネイルの.click()イベントの.change()イベント...ボタンをサブスクライブして、AJAXを使用してコントローラのアクションにフォームを送信できます。あなたの助けを

$('#myform').ajaxSubmit({ 
    url: '@Url.Action("thumbnail")', 
    success: function(result) { 
     // the result variable will contain the result of 
     // the execution of the Thumbnail action. 
     // could be a BASE64 encoded representation of 
     // the thumbnail you generated on the server and then 
     // simply set it to the src property of your preview `<img>` 
     // element using the Data Uri scheme 
    } 
});