javascript - Javascript:显示所选图片

This question already has answers here:

Preview an image before it is uploaded

(28个答案)


5年前关闭。




我正在尝试制作，因此当您选择图片时，它将直接显示出来。当然，您可以使用html中的onchange来完成此操作。这就是我现在所拥有的:

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);
}

<img id="target" />
<input type="file" id="select_image" name="image" onchange="putImage()"> </input>

这对我来说并不奇怪。因为onchange有效。我可以通过在事件中发出警报来进行测试。很好。 javascript也可以在jsfiddle中工作。但是这些东西没有结合在一起。我希望有人能帮帮忙

最佳答案

您不需要在showImage函数中使用change事件。您已经使用html内部的onechange事件处理程序调用了putImage方法，并且该方法包含对showImage的调用:

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);
}

fiddle在这里。