从 <input file> 将图像加载到 <img>

Question

我正在尝试通过元素加载用户选择的图像。

我向输入元素添加了一个 onchange 事件处理程序，如下所示：

 <input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>

preview_2 函数是：

 var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}

其中 outImage 具有我希望加载新图片的标签的 id 值。

但是，似乎永远不会发生 onload 并且它不会将任何内容加载到 html 中。

我应该怎么办？

原文由 Valentina 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在支持 File API 的浏览器中，一旦用户选择了文件，就可以使用 FileReader 构造函数来读取文件。

例子

document.getElementById('picField').onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById(outImage).src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }

    // Not supported
    else {
        // fallback -- perhaps submit the input to an iframe and temporarily store
        // them on the server until the user's session ends.
    }
}

浏览器支持

• IE 10
• Safari 6.0.2
• 铬 7
• 火狐 3.6
• 歌剧 12.02

在不支持文件 API 的情况下，您无法（在大多数具有安全意识的浏览器中）从文件输入框中获取文件的完整路径，也无法访问数据。唯一可行的解决方案是将表单提交到隐藏的 iframe 并将文件预上传到服务器。然后，当该请求完成时，您可以将图像的 src 设置为上传文件的位置。

原文由 Andy E 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最简单的方法是创建一个对象 URL

 <input onChanged={(event)=>{ URL.createObjectURL(event!.target!.files[0]) }} />

原文由 Seth Samuel 发布，翻译遵循 CC BY-SA 4.0 许可协议