Javascript：显示所选图像[重复]答案

【问题标题】：Javascript: show selected image [duplicate]Javascript：显示所选图像[重复]
【发布时间】：2015-02-07 20:44:27
【问题描述】：

我正在尝试制作它，因此当您选择图像时，它会直接显示它。当然，您可以在 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 中使用。但这些东西并没有结合起来。希望有人能帮忙

【问题讨论】：

图片还没上传……怎么能显示图片呢？
@SpencerMay 使用文件 API。这是 JavaScript 专家喜欢演示的东西。

标签： javascript jquery html

【解决方案1】：

showImage 函数中不需要更改事件。您已经使用 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 在这里。

【讨论】：

非常感谢，成功了！