首页 > 其他分享 >冲刺记录

冲刺记录

时间:2023-05-28 10:34:12浏览次数:37  
标签:function 记录 image 冲刺 file reader var document

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

 <!--  <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>

效果

 

 

标签:function,记录,image,冲刺,file,reader,var,document
From: https://www.cnblogs.com/azwz/p/17437863.html

相关文章

  • MongoDB基本操作记录
    MongoDB基本操作记录连接Mongo:mongo--host127.0.0.1--port27017-uroot-p123456显示数据库列表:showdbs选择数据库:useCX_tb显示所有表名:db.getCollectionNames()删表:db.xxx.drop()显示帮助:db.xxx.help()插入一条数据:db.xxx.insert({"id":"1","add_time":&q......
  • QT显示插件(LinuxFB)及其依赖的驱动(DRM/framebuffer)记录
    关键词:Framebuffer、linuxfb、DRM等等。 QT在Linux中支持多种显示插件,包括EGLFS、LinuxFB、DirectFB、Wayland等。可以通过--platfrom选项指定选择何种插件。比如:./analogclock--platformlinuxfb。QT支持多种显示插件,显示插件打开Linux内核fb设备,Linux内核中GPU/Display驱动......
  • SpringBoot —— 记录
    一、概述(专门用于框架整合,简化开发)1、简介SpringBoot是对Spring的改善和优化,它基于约定优于配置的思想,提供了大量的默认配置和实现使用SpringBoot之后,程序员只需要按照它规定的方式去进行代码的开发,而无需再去编写一堆复杂的配置。2、主要功能......
  • C语言猜字游戏记录
    1.猜字游戏的逻辑2.猜字游戏主体结构的实现3.菜单函数4.玩游戏函数##用rand函数和时间戳达到随机......
  • 记录一个命令 可以在linux很方便的安装一些软件
    小鱼的一键安装系列wgethttp://fishros.com/install-Ofishros&&.fishros一键安装:ROS(支持ROS和ROS2,树莓派Jetson)贡献@小鱼一键安装:VsCode(支持amd64和arm64)贡献@小鱼一键安装:github桌面版(小鱼常用的github客户端)贡献@小鱼一键安装:nodejs开发环境(通过nod......
  • webapplication.createBuilder一些记录
    internalWebApplicationBuilder(WebApplicationOptionsoptions,Action<IHostBuilder>?configureDefaults=null){varconfiguration=newConfigurationManager();configuration.AddEnvironmentVariables(prefix:"ASPNETCORE_&quo......
  • Powershell 修改 DNS 记录权限
    执行脚本需要管理员权限,且需要运行的计算机安装AD管理工具。FunctionSet_DNSACL{###$SourceServerisControldestinationServer.param($SouServer,$DstServer)$DNSServer=(Get-ADDomain).PDCEmulator$ZoneNames=(Get......
  • 【React工作记录六十八】ant design一个页面(新增编辑)
     目录前言导语总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语antdesign锚点组件编辑核......
  • 【React工作记录七十】判断数组对象中是否满足某条件
     目录前言导语 核心代码总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣歌谣数组......
  • 【React工作记录六十九】Taro中的轻提示
     目录前言导语代码部分运行结果代码部分运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷......