2

Razor ビューを使用して ASP.NET MVC3 アプリケーションに取り組んでいます。削除/アップロード オプションを使用して、シンプルなカスタム イメージ ギャラリーを作成しようとしています。すべてのロジックは内部にある@HTML.BeginFormため、フォーム全体が送信されたときにのみデータがサーバーに送信されます。それまでは、ユーザーがサーバーを呼び出さずに画像を追加/削除できるようにしたいと考えています。実際、ユーザーにはリンクが表示さDeleteれUploadますが、フォーム全体が送信されるまで、これらの両方がバックエンド ロジックに影響を与えることはありません。

そのため、ユーザーがファイル システムを参照してさまざまな画像を追加/削除できるようにしたいのですが、画像を選択すると、それをspanタグに表示したいだけです。

フォームに添付できる画像の量が限られているため、画像をアップロードするには次のようにします。

@for (var i = ViewBag.PictureCount; i < Model[0].MCS_Documents.MaxPicCount; i++)
    { 
        <span class="document-image-frame">
        <a href="#" class="upload-document-image">Upload Image</a>
        </span>
    }

そしてjQueryを介して、選択した画像をこの中に表示したいのですspanが、実装方法がわかりません。

非常に単純でも、私はこれを持っています:

$('upload-document-image').click(function () {
    //???    
    });

ユーザーが「画像のアップロード」をクリックすると、ファイルダイアログウィンドウが開き、画像を選択すると表示されますが、サーバーとは対話しません。

4

1 に答える 1

4

これは、クライアント ブラウザがHTML 5 File API. ドキュメントが示すように、ビューにファイル入力フィールドを追加することから始めることができます。

@for (var i = ViewBag.PictureCount; i < Model[0].MCS_Documents.MaxPicCount; i++)
{ 
    <span class="document-image-frame">
        <a href="#" class="upload-document-image">Upload Image</a>
        <input type="file" accept="image/*" style="display:none" onchange="handleFiles(this)" />
    </span>
}

次に、javascript を配線します。

$(function() {
    $('.upload-document-image').click(function() {
        $(this).next('input[type="file"]').trigger('click');
        return false;
    });
});

function handleFiles(fileInput) {
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;

        if (!file.type.match(imageType)) {
            continue;
        }

        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        $(fileInput).after(img);

        var reader = new FileReader();
        reader.onload = (function(aImg) { 
            return function(e) { 
                aImg.src = e.target.result; 
            }; 
        })(img);
        reader.readAsDataURL(file);
    }    
}

これがlive demo.

クライアント ブラウザが HTML 5 ファイル API をサポートしていない場合は、画像をサーバーにアップロードし、動的に生成され<img>たタグをポイントして、プレビューを表示できるようにするしかありません。

于 2013-06-10T06:17:05.893 に答える