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

Posted 2023-05-07

【中文标题】Javascript：显示所选图像[重复]

【英文标题】：Javascript: show selected image [duplicate]

【发布时间】：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 专家喜欢演示的东西。

【参考方案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 在这里。

【讨论】：

非常感谢，成功了！