关于jquery：Javascript：显示所选图像


Javascript: show selected image

本问题已经有最佳答案，请猛点这里访问。

我试图这样做，当你选择你的图像时，它会直接显示它。 当然你在html的onchange中做这件事。 这就是我现在所拥有的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function showImage(src, target) {
    var fr = new FileReader();

    fr.onload = function (e) { target.src = this.result; };

    src.addEventListener("change", function () {

        fr.readAsDataURL(src.files[0]);
    });

}
function putImage() {
    var src = document.getElementById("select_image");
    var target = document.getElementById("target");
    showImage(src, target);
}
1
2
<img id="target" />
<input type="file" id="select_image" name="image" onchange="putImage()"> </input>

这对我来说不是很奇怪。 因为onchange有效。 我可以通过警告事件来测试它。 这很好用。 javascript也适用于jsfiddle ..但这些东西并没有合并。 我希望有人能帮帮忙

相关讨论

您不需要showImage函数中的change事件。 你已经使用html中的onechange事件处理程序调用了putImage方法，该方法包含showImage的调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
function showImage(src, target) {
    var fr = new FileReader();
    fr.onload = function(){
        target.src = fr.result;
    }
    fr.readAsDataURL(src.files[0]);
}

function putImage() {
    var src = document.getElementById("select_image");
    var target = document.getElementById("target");
    showImage(src, target);
}

小提琴就在这里。

相关讨论