input框图片预览

效果
在这里插入图片描述

在这里插入图片描述
地址
http://www.oujin.fun/webPage/staticPage/img_input/index.html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
  </script>
  <style type="text/css">
    html,body{
      height: 100%;width: 100%
    }
    .content{
      height: 100%;
      width: 100%;
    }
    .boxStyle4{
      height: 50%;
      width: 50%;
      border: 1px cadetblue dashed;
      top:25%;
      left: 25%;
      position: absolute;
    }
    .mButton1{
      width: 80px;
      height: 35px;
      border-radius: 5px;
      border: none;
      outline: none;
      background-color: #409EFF;
      color: #fefefe;
    }
  </style>
</head>
<body>
<div class="content">
<div class="boxStyle4">
  <img id="img">
<input id="upload" onchange="upload(this)" style="display: none" type="file"  accept="image/*">
<!--  <input onchange="inputTest(this)">-->
  <button id="uploadButton" class="mButton1" onclick="test(this)">upload</button>
</div>
</div>
</body>
<script type="text/javascript">
/*  document.addEventListener("click",function(e){
    console.log(e.target)
  })*/
/*function inputTest(e){
  console.log(event)
  console.log(arguments)
  console.log(e)
}*/
  function upload(e){
    //this,event,arguments的区别,event.target与arguments[0]都是指向this的
    console.log(arguments[0]===e)
    console.log(event.target===e)
    console.log(arguments.file)
    //新建FileReader对象
    //FileReader.readAsDataURL()开始读取指定的Blob中的内容。一旦完成，
    // result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
    const read= new FileReader();
    read.readAsDataURL(event.target.files[0])
    //上传完成调用
    read.onload=(s)=>{
     // console.log(s)
   //   console.log(s.target.result)
      //将生成的二进制文件赋值到指定的img
      document.getElementById("img").src=s.target.result
    }
  }
  function test(e){
    document.getElementById("upload").click()
  }


</script>
</html>

input框图片预览

input框图片预览

猜你喜欢