如何在不向服务器发送数据的情况下显示选定的图像？

我试图向客户展示他选择的图像：

<input type="file" onchange="showImage(this)"/>

但我无法读取输入的值，因为我签出了here https://stackoverflow.com/questions/5903323/cant-get-value-of-input-type-file。可以显示图像吗？

In onchange我可以将表单发送到服务器，服务器可以将数据发回，但这真的有必要吗？客户端不与服务器交互就不能显示数据吗？这是安全问题吗？

您可以使用文件阅读器 https://developer.mozilla.org/en-US/docs/Web/API/FileReader为此，请参阅以下 web-api 对象：

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