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皆 ...
随机推荐
- Android集成支付宝的坑
Android在集成支付宝sdk的时候, 如果有安装支付宝,则启动支付宝app进行支付: 如果没有安装,则启动 H5PayActivity 进行支付. 记得在AndroidManifest里面配置: ...
- 《DSP using MATLAB》示例Example4.12
上代码: b = [0, 1, 1]; a = [1, -0.9, 0.81]; % [R, p, C] = residuez(b,a); Mp = (abs(p))' Ap = (angle(p)) ...
- Swift3.0语言教程使用编码创建和初始化字符串
Swift3.0语言教程使用编码创建和初始化字符串 使用编码创建和初始化字符串 创建和初始化字符串除了可以使用上文中提到的方法外,还可以使用init(coder:)方法,此方法一般不常使用,其语法形式 ...
- 00_Java基本常识
1. 基本常识 软件:一系列按照特定顺序组织的计算机数据和指令的集合. 常见的软件:系统软件 和 应用软件. 人机交互:图形化界面.命令行方式 计算机语言:人与计算机交流的方式 dos常见命令 ...
- PHP 字符检测自定义函数
<?php /** * 转义字符替换 * * @param string $subject * @return string */public static function sReplace( ...
- http://www.cnblogs.com/baizhanshi/p/5593431.html
http://www.cnblogs.com/baizhanshi/p/5593431.html
- Java API 实现HBase的数据添加与过滤查询
包依赖比较麻烦,找了好久,我用的CDH5.0 现将所依赖的包的列表清单如下: public class EmployeeDao { /** * @param args */ public static ...
- EF框架step by step(3)—Code-First
CodeFirst是EF框架的第三种方式,也是最为复杂一种方式,本文将以EF4.1版本为基础,简要讲解一下用法,同时,也介绍DbContext的用法. 本文采用的示例仍然是前两篇采用的博客用户的示例. ...
- why cpp is a shitty language
// the below is a standard template for any of my writings about c++ cpp_is_a_shitty_language_as { t ...
- Android 蓝牙4.0 BLE
Android ble (Bluetooth Low Energy) 蓝牙4.0,也就是说API level >= 18,且支持蓝牙4.0的手机才可以使用. BLE是蓝牙4.0的核心Profil ...