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;
    }
  }


相关文章
|
2天前
|
移动开发 前端开发
VForm3的文件上传后的一种文件回显方式
VForm3的文件上传后的一种文件回显方式
|
5天前
|
C#
C#获取文件基本信息,文件名称、修改时间、文件路径等
C#获取文件基本信息,文件名称、修改时间、文件路径等
8 0
|
10天前
|
前端开发 JavaScript PHP
在多文件上传中,处理文件大小限制
【5月更文挑战第3天】在多文件上传时,为限制文件大小,通常会在前端(JavaScript,如jQuery示例)和后端(如PHP)实施检查。前端检查防止超大文件上传,后端验证确保接收文件符合大小限制,两者结合以增强安全性。
23 1
|
4月前
Win11怎么设置显示文件扩展名
Win11怎么设置显示文件扩展名
257 2
|
10月前
|
Linux
【Linux命令200例】用file检查文件类型
在Linux系统中,file命令是一个用于检查文件类型的工具。它可以通过读取文件内容的特征来确定文件的类型,从而帮助用户识别和处理文件。`file`命令常用于获取文件的基本信息,如文件类型、编码格式等。
158 0
开发程序前的准备——显示文件扩展名
开发程序前的准备——显示文件扩展名
107 0
开发程序前的准备——显示文件扩展名
|
前端开发
前端上传文件或者上传文件夹
前端上传文件或者上传文件夹
178 0
前端上传文件或者上传文件夹
|
Python
Python获取指定目录下的所有文件路径、获取指定目录下所有文件名(但是不包含子目录中文件名)、获取指定目录下所有pdf文件名(但是不包含子目录中pdf文件名)
Python获取指定目录下的所有文件路径、获取指定目录下所有文件名(但是不包含子目录中文件名)、获取指定目录下所有pdf文件名(但是不包含子目录中pdf文件名)
196 0
|
Java 数据安全/隐私保护 Apache