Django:显示图像示例jquery不工作 - 未捕获的参考错误

时间:2016-06-23 18:01:17

标签: javascript jquery django

我正在尝试在基于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上试过这个并且它有效。我在镀铬。这是chrome调试输出显示的内容

enter image description here

在靠近x时,它会声明

  

未定义参考错误$未定义。

我的jquery已加载。那是什么铬说的 enter image description here

更新

所以它就像这样

<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()">

我不确定为什么会这样。任何解释将不胜感激。 为什么它需要在startup

1 个答案:

答案 0 :(得分:0)

这就是我解决问题的方法

<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()">