如何显示所选图像而不将数据发送到服务器?

问题描述 投票:7回答:1

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

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

但是当我查看here时,我无法读取输入的值。是否可以显示图像?

onchange中,我可以将表单发送到服务器,服务器可以将数据发送回来,但是真的有必要吗?如果没有乒乓球到服务器,客户端是否无法显示数据?这是一个安全问题吗?

javascript html file-io
1个回答
21
投票

您可以使用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);
© www.soinside.com 2019 - 2024. All rights reserved.