<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. Jmeter(四)_16个逻辑控制器详解

    循环控制器: 指定其子节点运行的次数,可以使用具体的数值,也可以设置为变量 1:勾选永远:表示一直循环下去 2:如果同时设置了线程组的循环次数和循环控制器的循环次数,那循环控制器的子节点运行的次数为两 ...

  2. Selenium+Python自动化测试环境搭建和搭建过程遇到的问题解决

    环境搭建: 第一步:安装Python  网址:https://www.python.org/ 按照如图提示安装,并且配置环境变量(安装时候选中pip会自动安装Python的包管理工具 pip,推荐选择 ...

  3. 4、c++ Arx二次开发创建多段线

    一.本节课程 c++ Arx二次开发创建多段线 二.本节要讲解的知识点 如何应用C++ ARX二次开发创建多段线(AcDbPolyline.AcDb2dPolyLine.AcDb3dPolyline的 ...

  4. Overlay技术

  5. wpf-典型的mvvm模式通用中小型管理系统框架0

    之前就一直在想着写这么一系列博客,将前段时间(也算有点久了)自己编写的一套框架分享下,和园子里的诸位大牛交流交流,奈何文思枯竭,提键盘而无从敲起,看来只有coding时才不会有这种裤子都脱了,才发现对 ...

  6. Daily Scrum NO.5

    工作概况 符美潇 昨日完成的工作 1.Daily Scrum.日常会议及日常工作的分配和查收. 2.变更集461代码签入,主要与视频链接爬取有关. 今日工作 1.Daily Scrum.日常会议及日常 ...

  7. Linux读书笔记第三、四章

    第三章 主要内容: 进程和线程 进程的生命周期 进程的创建 进程的终止 1. 进程和线程 进程和线程是程序运行时状态,是动态变化的,进程和线程的管理操作(比如,创建,销毁等)都是有内核来实现的. Li ...

  8. 《Linux内核设计与实现》第18章读书整理

    第十八章.调试 18.1 准备开始 如果bug能重现的话,将会有很大的帮助. 18.2 内核中的bug Bug多种多样,产生的原因可以有无数的原因,表象也变化多端. 从隐藏在源代码中的错误到展现在目击 ...

  9. 《Linux内核分析》第三周：Linux系统启动过程

    杨舒雯 原创作品转载请注明出处 Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.实验--使用gdb跟踪调试内 ...

  10. SE Springer小组《Spring音乐播放器》软件需求说明之四

    4 运行环境规定 4．1设备 我们计划完成的音乐软件较小巧,功能并不复杂,在普通笔记本电脑中即可运行,并无特殊硬设备要求. 4．2支持软件 需要用到windows操作系统,用VS编写C/C++代码,还 ...