我试图向客户展示他选择的图像：
<input type="file" onchange="showImage(this)"/>
但是我无法读取输入的值，因为我在这里签出。可以显示图像吗？
在onchange我可以将表单发送到服务器，服务器可以将数据发回，但这真的有必要吗？客户端不能在没有乒乓的情况下向服务器显示数据吗？这是一个安全问题吗？
如何在不向服务器发送数据的情况下显示选定的图像？
IT技术
javascript
html
file-io
2021-02-24 19:14:30
1个回答
您可以为此使用FileReader web-api 对象，请参阅此代码段：
HTML
<input id="src" type="file"/> <!-- input you want to read from (src) -->
<img id="target"/> <!-- image you want to display it (target) -->
javascript
function showImage(src,target) {
var fr=new FileReader();
// when image is loaded, set the src of the image where you want to display it
fr.onload = function(e) { target.src = this.result; };
src.addEventListener("change",function() {
// fill fr with image data
fr.readAsDataURL(src.files[0]);
});
}
var src = document.getElementById("src");
var target = document.getElementById("target");
showImage(src,target);
其它你可能感兴趣的问题