如何显示选定的图像，而不发送数据到服务器？ [英] How to display selected image without sending data to server?

问题描述

 < input type =fileonchange 
 
我试图向客户展示他已经选择的图像。 = showImage（这）/> 
  

但我无法读取输入的值，因为我检出here 。是否可以显示图像？

在 onchange 我可以发送表单到服务器和服务器可以发送数据回来了，但真的有必要吗？客户端能否在没有乒乓的情况下显示数据？这是一个安全问题吗？

解决方案

您可以使用 FileReader web-api object for this，see this snippet：

HTML

 < input id =srctype =file/> //输入你想要读取的内容（src）
   

javascript

  function showImage（src，target）{
 var fr = new FileReader（）; 
 //当图像被加载时，设置你想要显示图像的src 
 fr.onload = function（e）{target.src = this.result; }; 
 src.addEventListener（change，function（）{
 //用图像数据填充fr 
 fr.readAsDataURL（src.files [0]）; 
}）; 
} 
 
 var src = document.getElementById（src）; 
 var target = document.getElementById（target）; 
 showImage（src，target）; 
  

I am trying to show the client an image which he has selected:

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

But I can't read the value of the input, as I checked out here. Is it possible to display the image?

In onchange I can send the form to server and server can send the data back, but is it really necessary? Can't the client display the data without the ping-pong to the server? Is it a security issue?

解决方案

You can use FileReader web-api object for this, see this snippet:

the HTML

<input id="src" type="file"/> // input you want to read from (src)
<img id="target"/> // image you want to display it (target)

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

这篇关于如何显示选定的图像，而不发送数据到服务器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！