小记 HTML5 file对象
<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对象的更多相关文章
- HTML5 File 对象
实例说明1: <div class="container"> <input type="file" id="file" m ...
- Html5——File、FileReader、Blob、Fromdata对象
File File 接口提供有关文件的信息,并允许网页中的JavaScript访问其内容. File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一 ...
- [HTML5] FileReader对象
写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- HTML5 File API
1.File API 一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍.File API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的 ...
- HTML5 File接口(在web页面上使用文件)
File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容. File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的Data ...
- HTML5 File API 全介绍
在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...
- H5 语义化、基本事件 浅析 （含file对象、drag拖拽等）
1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
随机推荐
- python中类中属性和方法的具体定义方法和使用
1. Python中类中特性分成属性和方法 属性和方法都分为私有和公有的,私有的只可以在本类中使用外部是无法访问的 2. 定义属性(成员变量)的语法格式(公有属性/私有属性) class 类名: de ...
- 关于python内存地址问题
遇到一个朋友,给我提了一个问题:python中的两个相同的值,内存地址是否一样? 当时印象里有这样一句话:Python采用基于值的内存管理模式,相同的值在内存中只有一份 于是张嘴就说是一样的 朋友说不 ...
- 科普贴 | 以太坊代币钱包MyEtherWallet使用教程，一步步教你玩转MEW
MyEtherWallet 是一个以太坊的网页钱包,使用非常简单,打开网页就可以使用,源代码开源,不会在服务器上存储用户的钱包信息如私钥和密码.支持 Ledger Wallet.TREZOR 等硬件钱 ...
- java 中的内部类总结
内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类. 如同一个人是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏:它也有自己的属性和行为(血液.跳动). 显 ...
- 3月web前端面试小结
说一下box-sizing的应用场景 box-sizing的属性值分为两个,border-box和content-box,其中, border-box:width=content+padding+bo ...
- JAVA面对对象(一)——封装
1.封装思想:将对象的属性和行为封装起来的载体是类,类通常对客户隐藏其实现的细节 2.封装就是将属性私有化(private),并提供公共的方法(public)访问私有属性 3.通过封装,实现对属性数据 ...
- Ubuntu18.04 安装后的简单实用设置[未完成]
1. 安装完成. 2. 更新 sudo apt-get update 3. 修改vi 放置键盘错位的问题 编辑文件/etc/vim/vimrc.tiny 将“compatible”改成“nocompa ...
- POJ 1062 昂贵的聘礼（最短路中等题）
昂贵的聘礼 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 51879 Accepted: 15584 Descripti ...
- c# DataGridView绑定DataTable对象之后总会多一行
DataGridView 属性 AllowUserToAddRows = false
- Flume自定义Source、Sink和Interceptor(简单功能实现)
1.Event event是flume传输的最小对象,从source获取数据后会先封装成event,然后将event发送到channel,sink从channel拿event消费. event由头he ...