1

ASP.NET MVC3 アプリケーションに取り組んでいます。カスタム画像ギャラリーを実装していますが、多くの困難に直面しています。対象ブラウザがIE9なのでHTML5 File APIが使えません。私のコードはすべて、厳密に型指定された Razor ビュー内に@using Html.BeginFormあり、ユーザーが必要な数の画像を送信する前に追加/削除できる機能を実装したいと考えています。

私の調査から、実際に保存する前にIE9で画像をプレビューする方法がないことがわかったので、メインフォームの外でギャラリーのコードを取得する必要がありました。これでサーバーに画像をアップロードできますが、新しい画像を表示するにはページをリロードする必要があります。これは、私が達成しようとしていることとは正反対です。メインフォームの送信時に実行されます。

私の経験から、そのようなことは AJAX を使用して達成されることはわかっていますが、コードの書き方がわかりません。これは私が今持っているものですが、正しい道を歩いているかどうかはわかりません:

using(Html.BeginForm("UploadPicture", "Forms", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
         <span class="document-image-frame">
         <input type="file" name="file" />
         <input type="submit" value="OK" class="blabla" />
         </span>
    }

次に、このスクリプトを使用して、リロードせずに新しくアップロードされた画像のパスを取得する方法を見つけようとします。

$(document).on('click', '.blabla', function () {
        if (confirm('Do you want to save the image?')) {
            $.ajax({
                url: this.href,
                type: 'POST',
                context: this,
                success: function (result) {
                    $(this).closest('span').remove();
                    $("#ajaxBusy").remove();
                }
            });
        }
        return false;
    })

このスクリプトは、もともと別の目的で作成されたものです。確認は要りませんが、とりあえず痛くないと思います。

4

1 に答える 1