冲刺记录

二阶段冲刺我主要完成的为简历网站首页的制作以及一键生成生成个人简历的部分分工,本次主要为实现简历页面上传个人照片并且隐藏按钮

 <!--  <input id="file-input" type="file">
                <img id="preview-img" src="#" style="width:120px;height:131px;padding:3px; margin:25px 0px 0px 0px;border:1px solid #ddd; _margin-top:20px; *margin-top:20px;" >
               </td> -->  
               个人头像<input type="file"  name="" id="user-photo" style="opacity: 0;"/>
 <!--  <input type="button" value="选择文件" />
        <input type="file" accept="image/*" style="display: none;" name="" id="user-photo" /> -->   
    <div id="show-picture"></div>

script

<script>
  //  window.onload = (event) => {
   //     main();
  //  }
    
   // function main() {
   //     const inputButton = document.querySelector("input[type='button']")
     //   const inputFile = document.querySelector("input[type='file']")
        
     //   inputButton.onclick = (event) => {
      //      inputFile.click();
      //  }
         // }
       
  

      var getUserPhoto = document.getElementById("user-photo");
      getUserPhoto.onchange = function () {
        var file = this.files;
        console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onload = function () {
          var image = document.createElement("img");
          image.width = "120";
          image.height = "150";
          image.src = reader.result;
          var showPicture = document.getElementById("show-picture");
          showPicture.append(image);
        };
      };
    </script>

效果

 

 

posted @ 2023-05-28 10:22  橘子味芬达水  阅读(5)  评论(0编辑  收藏  举报