我正在尝试在基于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调试输出显示的内容
在靠近x时,它会声明
未定义参考错误$未定义。
更新
所以它就像这样
<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
答案 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()">