H5--文件上传(显示文件)

简介: H5--文件上传(显示文件)

20190904164319930.png

20190904164349373.png

需求:上传照片后,在文件上传控件下方显示已经上传的图片文件
  <form action="">
  文件:<input type="file" name="myFile" id="myFile" onchange="getFile()" value="" /><br>
    <input type="submit" name=""/>
    <div><img src="" id="img"/></div>
  </form>
  function getFile(){
    var reader=new FileReader();
    var file=document.querySelector('#myFile').files;
    console.log(file);
    reader.readAsDataURL(file[0]);
    reader.onload=function(){
      console.log(reader.result);
      document.querySelector("#img").src=reader.result;
    }
  }


相关文章
|
7月前
|
Windows
Hasleo EasyUEFI v5.5单文件版
Hasleo EasyUEFI,轻松管理EFI/UEFI启动项 & 管理EFI系统分区 & 修复EFI系统启动问题!EasyUEFI是免费EFI启动管理软件,用于管理EFI/UEFI启动项,包括创建、删除、编辑、清理、备份和还原EFI/UEFI启动项。
81 0
|
7月前
|
存储 内存技术
什么是文件
什么是文件
161 0
|
7月前
文件
文件操作。
38 0
|
数据安全/隐私保护
p文件如何转为m文件
如果你是MATLAB爱好者,你一定知道MATLAB P文件,但是,你是否也和许多人一样,摸不着头脑?难道你也经常遇到MATLAB P文件加密问题,难以阅读和研究吗?那么,你需要一个MATLAB P文件解密工具!
|
存储 C语言
文件(下)——“C”
文件(下)——“C”
|
编译器 数据库 C语言
文件(上)——“C”
文件(上)——“C”
|
C#
C#生成anb文件
C#生成anb文件
136 0
C#生成anb文件
|
IDE Linux 开发工具
.editorconfig文件
.editorconfig文件
76 0
|
存储
Fasta和Fastq文件
Fasta和Fastq文件
264 0