HTML5文件API
File对象与File对象
Blob对象
FileReader对象
File对象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<script type="text/javascript">
function showFileName() {
var file;
for (var i = 0; i < document.getElementById("file").files.length; i++) {
file = document.getElementById("file").files[i];
console.log(file.name);
}
}
</script>
</head> <body>
<input type="file" id="file" multiple> /*File对象 multiple熟悉允许多个file*/
<input type="button" onclick="showFileName()" value="上传文件"> /*显示上传的文件名*/
</body>
</html>
Blob对象
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<script type="text/javascript">
function showFileInfo() {
var file;
for (var i = 0; i < document.getElementById("file").files.length; i++) {
file = document.getElementById("file").files[i];
var size = document.getElementById("size");//文件大小 单位Byte
size.innerHTML = file.size;
var type = document.getElementById("type");//文件类型
type.innerHTML = file.type;
if (!/image\/\w+/.test(file.type))/*正则表达式判断是否为图片格式*/
alert("请插入图片");
else
console.log("OK"); //打开浏览器审查元素 在console中显示
}
}
</script>
</head> <body>
<!--File->blob:size type-->
<input type="file" id="file" multiple>
<!--/*File对象 multiple熟悉允许多个file*/-->
<input type="button" onclick="showFileInfo()" value="上传文件">
<!--/*显示上传的文件名*/-->
<br> 文件大小：
<span id="size"></span></br>
文件类型：<span id="type"></span>
</body> </html>
FileReader对象
HTML5文件API的更多相关文章
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- HTML5 文件API（一）
1.FileList对象与File对象 2.文件API之Bolb对象 A Blob object represents a file-like object of immutable, raw dat ...
- HTML5文件API之FileReader
在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); ...
- HTML5 文件API（二）
1.FileSystem概述及浏览器检 2.申请磁盘配额 3.创建文件
- HTML5 文件API
filelist 表示文件对象的列表. <form name="upload"> <input type="file" name=" ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
1.标签元素更加语义化 2.内容类型仍然为“text/html” 扩展符仍然为html或者htm. <1>DOCTYPE 声明<!DOCTYPE html>就可 ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- HTML5 file api读取文件的MD5码工具
1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...
随机推荐
- windows修改虚拟内存
右键电脑属性: 高级系统设置: 性能设置: 虚拟内存更改:
- Android优化
ListView的优化 复用convertview , 历史的view对象 减少子孩子查询的次数 viewholder 异步加载数据(把图片缓存) 条目多时分页加载数据 加载时显示进度条让用户等待 I ...
- AOP动态代理解析4-代理的创建
做完了增强器的获取后就可以进行代理的创建了 AnnotationAwareAspectJAutoProxyCreator->postProcessAfterInitialization-> ...
- JQuery学习之其他
1.noConflict()方法:释放会$标识符的控制,这样其他也用$的脚本就可以使用它了 **全名代替简写的方法使用jQuery $.noConflict(); jQuery(document).r ...
- spring 干嘛用的，记录。以后用多了再补充
http://zhidao.baidu.com/link?url=TVePPDbQU1n61s_Bu2FT9_YoJebaux8tYlNEZQhiHYHpT8QIbbyOSC8wDnpVmnmurwN ...
- ol新属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BZOJ4665 : 小w的喜糖
考虑枚举哪些人一定不合法,那么方案数可以通过简单的排列组合算出. 于是设$f[i][j]$表示前$i$种糖果,一共有$j$个人一定不合法的方案数,但是这样并不能保证其他人一定合法,所以需要进行容斥. ...
- [转]linux（centos）搭建SVN服务器
转自:http://blog.163.com/longsu2010@yeah/blog/static/173612348201202114212933/ 安装步骤如下: 1.yum install ...
- The Result of an Interesting and Useful Program on Floating Numbers
The program: class Program { static void Main() { const double infinity = double.PositiveInfinity; c ...
- Java中UIManager的几种外观的详细讲解
Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...