<input type="file" id="myfile" multiple>

这是个很普通的 file 上传组件，multiple 是支持多选，当然 IE6-9 是不支持的，所以先不论他们了。

file对象 是一个非常好用的东西，可以获取到文件的 文件名，文件大小，文件类型，最后一次修改日期。
用起来也很简单，来看个小例子：

<!doctype html>

<html lang="zh">

<head>

  <meta charset="UTF-8">

  <title>file</title>

</head>

<body>

  <input type="file" id="myfile" multiple>

  <script>

    var myfile = document.getElementById("myfile");

    myfile.onchange = function () {

      console.log(myfile.files);

    }

  </script>

</body>

</html>

不出意外的话，你可以在控制台看到如下内容：

好了，今天就分享这个小知识点。

小记 HTML5 file对象的更多相关文章

  1. HTML5 File 对象

    实例说明1: <div class="container"> <input type="file" id="file" m ...

  2. Html5——File、FileReader、Blob、Fromdata对象

    File File 接口提供有关文件的信息,并允许网页中的JavaScript访问其内容. File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一 ...

  3. [HTML5] FileReader对象

    写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...

  4. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  5. HTML5 File API

    1.File API 一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍.File API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的 ...

  6. HTML5 File接口(在web页面上使用文件)

    File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容. File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的Data ...

  7. HTML5 File API 全介绍

    在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...

  8. H5 语义化、基本事件 浅析 （含file对象、drag拖拽等）

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

  9. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

随机推荐

  1. arduino按钮使用的两个小实验

    一:按钮控制一个灯                                                                                            ...

  2. 06-docker组件如何协作

    容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本地没有 httpd 镜像. daemon 从 Docker Hub 下载镜像. 下载完成, ...

  3. 关于如何在Tomcat中使用JavaBean

    对于没有使用myeclipse,NetBean等IDE工具的用户,如果在编写JSP时,用到了java文件,就必须配置JAVAbean了,网上也有很多在Tomcat中配置JAVABean的例子,这里我简 ...

  4. page = new String(request.getQueryString().getBytes("ISO-8859-1"),"GBK");解决前台传后台乱码问题

    page = new String(request.getQueryString().getBytes("ISO-8859-1"),"GBK");解决前台传后台 ...

  5. 手写vue双向绑定数据

    来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...

  6. word漏洞分析与利用

    众所周知,溢出漏洞从应用形式上可分为远程服务溢出漏洞和客户端(本地)溢出漏洞两类.远程服务溢出漏洞大家很熟悉了,红色代码.冲击波.振荡波等蠕虫都利用了此类漏洞,漏洞的调试和利用有相应的一套方法,前面的 ...

  7. 从零开始学Kotlin-数据类型（2）

    从零开始学Kotlin基础篇系列文章 基本数据类型 Kotlin 的基本数值类型包括 Byte.Short.Int.Long.Float.Double 等: 数据-------位宽度 Double-- ...

  8. Beta冲刺——day5

    Beta冲刺--day5 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...

  9. 4种PHP回调函数风格

    4种PHP回调函数风格 匿名函数 $server->on('Request', function ($req, $resp) use ($a, $b, $c) { echo "hell ...

  10. TCP/IP 之 大明王朝邮差 (转)

    原创: 刘欣 码农翻身 2016-05-12 前言: 本文主要想说一下TCP的知识, 比喻有不恰当之处,敬请包涵. 大明王朝天启四年, 清晨. 天色刚蒙蒙亮,我就赶着装满货物的马车来到了南城门, 这里 ...