input上传图片时让图片显示在页面上

input上传图片时让图片显示在页面上
用户上传图片的时候,让图片即时地显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" name="file" onchange="showPreview(this)" />
    <img id="portrait" src="" style="display:none;" />
</body>
<script type="text/javascript">
  function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
   var fr = new FileReader();
  console.log(fr);
  var portrait = document.getElementById('portrait');
  fr.onloadend = function(e) {
  portrait.src = e.target.result;
  };
  fr.readAsDataURL(file);
  portrait.style.display = 'block';
  }
  }
</script>
</html>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: