2016-06-23 18 views
1

私のdjangoベースのウェブサイトで次のjqueryの例を実行しようとしています。Django:画像例jqueryが表示されない - キャッチされていない参照エラー

は、これは私のコードの一部は、これまで

{% extends "base.html" %} 
{% load crispy_forms_tags %} 
    {% block content %} 


    <input type='file' /> 
    <img id="myImg" src="#" alt="your ...image" /> 

<script> 
$(function() { 
    $(":file").change(function() { 
     if (this.files && this.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = imageIsLoaded; 
      reader.readAsDataURL(this.files[0]); 
     } 
    }); 
}); 


function imageIsLoaded(e) { 
    alert("dsdsdsd") 
    $('#myImg').attr('src', e.target.result); 
}; 
</script> 



{% endblock %} 

それは私が$(":file").change関数が呼び出されていないファイルを選択するときのように思えるように見えるものです。それがなぜ呼び出されないかもしれないかについてのアイデア。私はjsfiddleでこれを試してみました。私はクロムです。これは、クロムデバッグ出力は、それがキャッチされない参照エラー$が定義されていない

を述べX上hooveringで

enter image description here

を示したものです。

My jqueryが読み込まれています。

ので、それがこのように動作しますなぜ私はわからないこの

<script> 
     function startup() 
     { 

       $(function() { 
        $(":file").change(function() { 
         if (this.files && this.files[0]) { 
          var reader = new FileReader(); 
          reader.onload = imageIsLoaded; 
          reader.readAsDataURL(this.files[0]); 
         } 
        }); 
       }); 

       function imageIsLoaded(e) { 
        $('#myImg').attr('src', e.target.result); 

       }; 

     } 
     </script> 


<body onload="startup()"> 

ように動作します:ザッツは何クロム enter image description here

更新言います。どんな説明もありがたいです。 なぜそれがstartup

+0

'$( "入力[タイプ= 'ファイル']")。change'を解く方法をされてする必要がありません? –

+2

これは、スクリプトが読み込み/実行されているときに 'jQuery'が読み込まれていない可能性が高いことを意味します。 'jQuery'ライブラリが最初に読み込まれていることを確認してください。 – Adjit

+1

私はそれを '

関連する問題