HTML5 文件API(一)

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

时间: 2024-12-28 23:46:35

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

HTML5文件API之FileReader

在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); 文件预览:readAsText();(必须保证文件编码格式与代码编码格式相同,预览中文才不会乱码) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

HTML5 文件API

filelist 表示文件对象的列表. <form name="upload"> <input type="file" name="fileselect" multiple> </form> document.forms['upload']['fileselect'].files 得到的就是filelist. 拖放方式选择文件: drag  drop 监听drop事件,dragOver事件 用拖放的方式选择文件

HTML5 文件API(二)

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

HTML5 文件拖放API讲解

本章向大家讲解一下HTML 5中文件API与拖放API的使用方法.HTML5的文件API,可以在浏览器中直接显示客户端文件的信息或文件中的内容,而通过拖放API,可以直接将位于客户端中的文件拖动到浏览器中,也可以单独拖动页面中的元素或者元素中的内容. HTML5拖拽文件预览效果图: 在线演示 以前,我们使用file控件,单击上传按钮后选择计算机中的文件.在HTML5中,我们可以先将计算机中的文件直接拖动到浏览器中进行预览,确定文件是我们所需要的,然后单击上传按钮将该文件上传到服务器端. 我们使用

HTML5 File API初探 支持文件拖放上传功能

新一代Web开发标准HTML 5可以带来远远超出其本身作为一种标记语言的能力,除我们之前介绍的HTML 5可完美支持视频音频元素外,还提供一些强大的脚本工具,负责监督HTML5发展进程的W3C组织,刚刚出版了一份有关文档操作API的规格草案,HTML5 File API 接口功能. 该HTML5 File API的设计初衷,是改善基于浏览器的Web应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 ﹤input type=”file”﹥ 来处理文件上传. 更为惊喜的是

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

1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆兼容: 3.缺陷:当上传大文件时,需要较长的时间才能扫描出MD5码: 4.关于引用:其中引用了js文件(spark-md5.js) <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

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

前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

那些牛掰的 HTML5的API

那些牛掰的 HTML5的API(二) 1:视频播放器 2:地理定位 我们的支持html5 的浏览器给我们提供一个接口(api),可以用来获取你当前的位置. 主要是通过geolocation(地理位置),对象 ,去访问硬件,来获取到经纬度.. 1 if (navigator.geolocation){ 2 navigator.geolocation.getCurrentPosition(showPosition); 3 } else{ 4 x.innerHTML="Geolocation is n