小记 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压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
随机推荐
- 开发工具之Spark程序开发详解
一 使用IDEA开发Spark程序 1.打开IDEA的官网地址,地址如下:http://www.jetbrains.com/idea/ 2.点击DOWNLOAD,按照自己的需求下载安装,我们用免费版 ...
- 云容器云引擎：容器化微服务，Istio占C位出道
在精彩的软件容器世界中,当新项目涌现并解决你认为早已解决的问题时,这感觉就像地面在你的脚下不断地移动.在许多情况下,这些问题很久以前被解决,但现在的云原生架构正在推动着更大规模的应用程序部署,这就需要 ...
- springboot 异步调用Async使用方法
引言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在spring 3. ...
- PAT甲级题解-1057. Stack (30)-树状数组
不懂树状数组的童鞋,正好可以通过这道题学习一下树状数组~~百度有很多教程的,我就不赘述了 题意:有三种操作,分别是1.Push key:将key压入stack2.Pop:将栈顶元素取出栈3.PeekM ...
- 团队冲刺随笔合集—Beta阶段
第一篇:http://www.cnblogs.com/Team-Blog/p/9049271.html 第二篇:https://www.cnblogs.com/Team-Blog/p/9064478. ...
- 从编译DotNetOpenAuth中学到的程序集强签名知识
1. 背景 最近在研究DotNetOpenAuth——OAuth的一个.NET开源实现,官方网站:http://dotnetopenauth.net/ . 从GitHub签出DotNetOpenAut ...
- 个人作业-Week 2 代码复审
一.概要部分 1.代码能符合需求和规格说明么? 经过我自己的测试和助教的检测,他的代码符合需求和规格的说明. 2.代码设计是否有周全的考虑? 这里代码设计我们是从两个方面检查的: 对方处理控制台输入的 ...
- bootstrap响应式布局列子
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- 微信小游戏 4M升8M分包加载
一.微信分包加载 微信分包加载教程 嘛,因为原来的4M太小了,满足不了小游戏内容的需求,现在提升到了8M.这8M可以分包加载,而不需要一次性加载8M. 如果是老版本,则分包加载不起作用,会一次加载8M ...
- phpStudy-坑爹的数据库管理器-phpMyAdmin的默认用户名和密码
在这里我必须承认自己的弱智,第一次使用phpMyAdmin竟然搞了10分钟才进去!!! 要使用默认的用户名和密码: 用户名:root 密码:root 尼玛!坑爹啊!不说清楚让我百度了半天!!!!