1.FileList对象与File对象

2.文件API之Bolb对象

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File documentation.

The APIs accepting Blob objects are also listed on the File documentation.

Constructor
Blob(blobParts[, options])
Returns a newly created Blob object whose content consists of the concatenation of the array of values given in parameter.
Properties
Blob.isClosed Read only
A boolean value, indicating whether the Blob.close() method has been called on the blob. Closed blobs can not be read.
Blob.size Read only
The size, in bytes, of the data contained in the Blob object.
Blob.type Read only
A string indicating the MIME type of the data contained in the Blob. If the type is unknown, this string is empty.
Methods
Blob.close()
Closes the blob object, possibly freeing underlying resources.
Blob.slice([start[, end[, contentType]]])
Returns a new Blob object containing the data in the specified range of bytes of the source Blob.
Examples
Blob constructor example usage

The Blob() constructor allows one to create blobs from other objects. For example, to construct a blob from string:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
Before the Blob constructor was available, this could be accomplished through the BlobBuilder API, which is now deprecated:

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');
Example for creating a URL to a typed array using a blob

The following code:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
Example for extracting data from a Blob

The only way to read content from a Blob is to use a FileReader. The following code reads the content of a Blob as a typed array.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
By using other methods of FileReader, it is possible to read the contents of a Blob as a string or a data URL.

间断上传文件的格式

3.文件API之FileReader对象

http://blog.csdn.net/zk437092645/article/details/8745647

HTML5 文件API(一)的更多相关文章

  1. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  2. HTML5文件API之FileReader

    在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); ...

  3. HTML5文件API

    File对象与File对象 Blob对象 FileReader对象 File对象 <!DOCTYPE html> <html> <head> <meta ht ...

  4. HTML5 文件API(二)

    1.FileSystem概述及浏览器检 2.申请磁盘配额 3.创建文件

  5. HTML5 文件API

    filelist 表示文件对象的列表. <form name="upload"> <input type="file" name=" ...

  6. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  7. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...

  8. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  9. HTML5 file api读取文件的MD5码工具

    1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...

随机推荐

  1. CENTOS6.2系统日志rsyslog替换默认的日志服务syslog 转载自http://www.phpboy.net/linux/648.html

    最近遇到配置centos 6.2的sshd及sftp日志,发现/etc/syslog.conf文件不存在, 然后: #rpm -qa | grep syslog 出来的是 rsyslog-5.8.10 ...

  2. PHP环境搭建(Windows8.1+IIS8.5+PHP5.6+PHPStorm)

    第一次接触php是在2014-5月份左右,当时是自己的主攻方向是C#,对php比较排斥, 其中很多一部分原因,就是PHP的断点调试一直无法配置成功,用echo打印日志的方式排错,使得自己对php心生怨 ...

  3. MemProof教程

    简介 MemProof(内存清道夫)是AutomatedQA出品的一款非常不错的检测内存泄漏和资源泄漏的免费调试工具,适合于WIN32平台下使用DELPHI/C++ BUILDER开发的应用程序. 利 ...

  4. cadence 机械孔的制作

    在平时画PCB的时候,会用到安装孔,好多人就是找个过孔,在原理图中连接GND,这样使用也可以,下面介绍一种正经机械孔的制作方法(自己摸索的),制作一个孔径为3mm的安装孔. 1 打开pad desig ...

  5. apache配置VirtualHost(windows)

    以下方式适合原生 Apache, XAMPP 和WAMP 套件. 1. 打开目录 {Apache2 安装目录}\conf\extra\, 找到 httpd-vhosts.conf 文件. 2. 仿照例 ...

  6. 通过FTP将一个数据文件从A服务器下载到B服务器的整个过程

    现在的环境如下: 服务器A :192.168.1.104 服务器B:192.168.1.138 需要将A服务器上的某个数据文件下载到B服务器上,传输方式为:FTP 那么,要怎么去实现呢? 首先,需要添 ...

  7. linux内核源码注解

    轻松学习Linux操作系统内核源码的方法 针对好多Linux 爱好者对内核很有兴趣却无从下口,本文旨在介绍一种解读linux内核源码的入门方法,而不是解说linux复杂的内核机制:一.核心源程序的文件 ...

  8. linux驱动路径

    1. 按键驱动 \drivers\input\keyboard\utu2440_buttons.c 2. LED驱动 \drivers\char\utu2440-led.c 3. DM9000网卡驱动 ...

  9. cppcheck使用

    一.splint介绍 splint是一个动态检查C语言程序安全弱点和编写错误的程序.splint会进行多种常规检查,包括未使用的变量,类型不一致,使用未定义变量,无法执行的代码,忽略返回值,执行路径未 ...

  10. 我应该直接学Swift还是Objective-C?

    当我们发布了Swift语言学习课程之后,收到了很多邮件和私信来问自己是否还需要学习C或者Objective-C.此外,人们似乎还在迷惑Swift到底适合iOS开发生态中的哪些部分.通过这篇文章,我希望 ...