分类目录归档:html5

HTML5之FILE API

一、简介

HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用。另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小。

 

该规范通过“本地”文件系统提供了多种文件访问接口:

  1. File – 独立文件;提供只读信息,例如名称、文件大小、mimetype 和对文件句柄的引用。
  2. FileList – File 对象的类数组序列(考虑 <input type=”file” multiple> 或者从桌面拖动目录或文件)。
  3. Blob – 可将文件分割为字节范围。

 

二、FILELIST

2014-07-06_123159

 

可以看到,此时已经获取了上传文件的基本信息(名称、大小、mime类型等)。

三、FileReader

通过FileList获取到文件引用后,我们就可以使用FileReader来读取文件内容。

FileReader有4个方法来获取文件

  • FileReader.readAsBinaryString(Blob|File) – result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。
  • FileReader.readAsText(Blob|File, opt_encoding) – result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。
  • FileReader.readAsDataURL(Blob|File) – result 属性将包含编码为数据网址的 file/blob 数据。
  • FileReader.readAsArrayBuffer(Blob|File) – result 属性将包含ArrayBuffer 对象形式的 file/blob 数据。

下面我们使用readAsText来读取txt文本内容。

 

2014-07-06_130001

读取后,FileReader的result属性为文件内容。

HTML5之Canvas(二)——画曲线quadraticCurveTo、bezierCurveTo

测试连接

HTML5之Canvas(二)——画曲线arc、arcTo

620b4e99jw1dzk6acv0f7j 620b4e99jw1dzk6adh3mxj 620b4e99tw1dzk4ogdstfj 620b4e99tw1dzk4ogsd49j

 

测试连接

参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE6%EF%BC%9A%E7%94%BB%E6%9B%B2%E7%BA%BF%E4%B9%8Barcto/

HTML5之Canvas(一)——画起来

 

 

测试连接

参考:http://dev.w3.org/2006/canvas-api/canvas-2d-api.html

http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE%E6%95%99%E7%A8%8B2%EF%BC%9A%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E7%94%BB%E7%BA%BF%E6%9D%A1/

HTML5之Audio(七)—— processor绘制波形图

测试连接

HTML5之Audio(六)—— 3D音效

 

 

测试连接

HTML5之Audio(五)—— 声音过滤

 

测试连接

HTML5之Audio(四)—— 左右声道

 

 

测试连接

HTML5之Audio(三)—— gain调节音量

 

 

测试连接

HTML5之Audio(二)—— processor调节音量

 

 

 

测试连接