如何在客户端显示图片到网络？ [英] how to display picture to web in client side?

问题描述

我选择了照片而无需上传图片以显示网页

I chose the photo without having to upload a picture to be displayed web page

<input type="file" class="file" id="file" name="file" title="Please upload"/>

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

推荐答案

您可以使用FileReader web-api对象，请参阅此示例：

在Html代码中：

You can use FileReader web-api object for this, see this example:
In Html code:

<input id="src" type="file" onchange="fileChange()" />
<img id="target" />

在javascript：

In javascript:

function fileChange(){
   var src = document.getElementById("src");
   var target = document.getElementById("target");
   showImage(src,target);
}

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]);
  });
}

这篇关于如何在客户端显示图片到网络？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！