0

画像のプレビューを表示する方法をいくつか見てきましたが、どれも機能しないか、FF/Chrome でしか機能しません。

シンプルにしようとしています：

マークアップ:

<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>        
<img src='@Url.Image("logo.png")' alt="Preview" id="logo-preview"/>

Javascript:

<script type="text/javascript">

    function changePreview() {

        var input = $('#logo-upload').val();

         $('#logo-preview').attr('src', input)
                    .width(150)
                    .height(50);
         }

</script>

デバッグ時inputに正しいローカル イメージ パスが表示されるが、プレビューが表示されない。なぜ、どのようにしてこれを機能させることができますか (すべてのブラウザーで) ?

ありがとう。

4

1 に答える 1

1

$('#logo-upload').change(function(){})onChange を使用する代わりに を設定してみてください。良いスタートだと思います。次に、jQuery を の中に入れ$(document).ready(function(){})ます。要素がページに存在する前にスクリプトを設定している場合、これは別の問題になる可能性があります。

より多くのコードを投稿できれば、それは有益です。

また、IE の場合、(少なくともこの状況では) コントロールできないユーザーのアクセス許可の問題に遭遇します。したがって、そのような場合は、最初に画像をアップロードしてサーバーから画像を取得するか、このタイプのコンテンツにアクセスできるようにセキュリティ設定を変更する必要があります.

<input type="file" id="logo-upload" />
<br/>        
<img src="@Url.Image('logo.png')" alt="Preview" id="logo-preview"/>

<script type="text/javascript">
    $(document).ready(function() {
        $('#logo-upload').change(function() {
            var input = $(this).val();
            $('#logo-preview').attr('src', input).width(150).height(50);
        })
    });
</script>
于 2012-08-03T20:26:22.593 に答える