HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
File API从 Web 访问文件
介绍安博中程在线File APIFileReader APIFilesystem & FileWriter APIBlob constructingBlob URLsExample扩展阅读·······3/14
使用File APIs读取文件规范提供的从local filesystem 访问文件的几个接口:安博中程在线File: 一个单独的文件;提供了诸如文件名,文件大小,mimetype,以及一个到文件句柄的引用。FileList: File对象的一...
检测浏览器对File API的支持情况方法1: 检测File, FileReader, FileList, Blob属性是否存在执行检测执行检测安博中程在线<script type=text/javascript>function suppor...
使用Input表单元素选择文件No file chosenChoose Files安博中程在线<input type="file" id="files" name="files[]" multiple /><output id="list"><...
使用拖拽方式选择文件把文件拖拽到这里安博中程在线function handleFileSelect2(evt) {evt.stopPropagation(); evt.preventDefault();var files = evt.dataT...
FileReaderFileReader包含四种异步读取文件的方式:一旦这些read方法被调用,onloadstart, onprogress, onload, onabort, onerror, onloadend就可以被用来追踪进度。安博中...
readAsDataURL ExampleNo file chosenChoose Files安博中程在线function handleFileSelect3(evt) {var files = evt.target.files;for (va...
文件切片Slicing FileFile接口提供了slice方法支持把文件切成不同的片段,第一个参数是起始的字节数,第二个参数是结束的字节数,还有一个可选的内容类型字符串可以作为第三个参数:安博中程在线var blob = file.slice...
Slice ExampleNo file chosenChoose File 读取字节数: 1‑801‑80 100‑150100‑150 10‑2010‑20 整个文件整个文件安博中程在线function readBlob(opt_start...
监视文件读取进度可以使用onloadstart和onprogress事件来监视读取进度No file chosenChoose File 停止读取停止读取安博中程在线function handleFileSelect5(evt) {reader...
参考安博中程在线W3C 规范 - FileW3C 规范 - FileSystem APIW3C 规范 - FileWriterW3C 规范 - ProgressEventsW3C 规范 - Drag and DropMozilla Hacks:...
<Thank you!>微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad
Upcoming SlideShare
Loading in …5
×

File api

366 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
366
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

File api

  1. 1. HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
  2. 2. File API从 Web 访问文件
  3. 3. 介绍安博中程在线File APIFileReader APIFilesystem & FileWriter APIBlob constructingBlob URLsExample扩展阅读·······3/14
  4. 4. 使用File APIs读取文件规范提供的从local filesystem 访问文件的几个接口:安博中程在线File: 一个单独的文件;提供了诸如文件名,文件大小,mimetype,以及一个到文件句柄的引用。FileList: File对象的一个类似数组的序列。(想象一下多文件上传或者直接从桌面系统拽一个文件夹的情形)Blob: 允许把文件转换成字节数值。···4/14
  5. 5. 检测浏览器对File API的支持情况方法1: 检测File, FileReader, FileList, Blob属性是否存在执行检测执行检测安博中程在线<script type=text/javascript>function supports_fileapi() {// 检查各种File API的支持情况if (window.File && window.FileReader && window.FileList && window.Blob) {// 所有的File APIs都支持} else {alert(浏览器对File APIs没有全部支持!);}}</script>JAVASCRIPT5/14
  6. 6. 使用Input表单元素选择文件No file chosenChoose Files安博中程在线<input type="file" id="files" name="files[]" multiple /><output id="list"></output>HTML<script type=text/javascript>function handleFileSelect(evt) {var files = evt.target.files;var output = [];for (var i=0, f; f = files[i]; i++) {output.push(<li><strong>, escape(f.name), </strong> (, f.type || n/a, ) -,f.size, 字节, 最后修改: , f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : n/a, </li>);}document.getElementById(list).innerHTML = <ul> + output.join() + </ul>;}document.getElementById(files).addEventListener(change, handleFileSelect, false);</script>JAVASCRIPT6/14
  7. 7. 使用拖拽方式选择文件把文件拖拽到这里安博中程在线function handleFileSelect2(evt) {evt.stopPropagation(); evt.preventDefault();var files = evt.dataTransfer.files; var output = [];for (var i=0, f; f = files[i]; i++) {output.push(<li><strong>, escape(f.name), </strong> (, f.type || n/a, ) -,f.size, 字节, 最后修改: , f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : n/a, </li>);}document.getElementById(list).innerHTML = <ul> + output.join() + </ul>;}function handleDragOver(evt) {evt.stopPropagation(); evt.preventDefault();evt.dataTransfer.dropEffect = copy;}var dropZone = document.getElementById(drop-zone);dropZone.addEventListener(dragover, handleDragOver, false);dropZone.addEventListener(drop, handleFileSelect2, false);JAVASCRIPT7/14
  8. 8. FileReaderFileReader包含四种异步读取文件的方式:一旦这些read方法被调用,onloadstart, onprogress, onload, onabort, onerror, onloadend就可以被用来追踪进度。安博中程在线FileReader.readAsBinaryString(Blob|File) - result属性包含的是file/blob的二进制字符串形式的数据。每个字节由一个0-255的整数表示。FileReader.readAsText(Blob|File, opt_encoding) - result属性包含的是以文本方式表示的file/blob数据。默认情况下,字符串以UTF-8编码方式解码。使用opt_encoding参数可以指定一个不同的格式。FileReader.readAsDataURL(Blob|File) - result属性包含的是以data URL编码的file/blob数据。FileReader.readAsArrayBuffer(Blob|File) - result属性包含的是以ArrayBuffer对象表示的file/blob数据。····8/14
  9. 9. readAsDataURL ExampleNo file chosenChoose Files安博中程在线function handleFileSelect3(evt) {var files = evt.target.files;for (var i=0, f; f = files[i]; i++) {if (!f.type.match(image.*)) {continue;}var reader = new FileReader();reader.onload = (function(theFile) {return function(e) {// Render thumnialvar span = document.createElement(span);span.innerHTML = [<img class="thumb" src=", e.target.result," title=", escape(theFile.name), "/>].join();document.getElementById(thumbnails).insertBefore(span, null);};})(f);reader.readAsDataURL(f);}}JAVASCRIPT9/14
  10. 10. 文件切片Slicing FileFile接口提供了slice方法支持把文件切成不同的片段,第一个参数是起始的字节数,第二个参数是结束的字节数,还有一个可选的内容类型字符串可以作为第三个参数:安博中程在线var blob = file.slice(startingByte, endingByte);reader.readAsBinary(blob);JAVASCRIPT10/14
  11. 11. Slice ExampleNo file chosenChoose File 读取字节数: 1‑801‑80 100‑150100‑150 10‑2010‑20 整个文件整个文件安博中程在线function readBlob(opt_startByte, opt_stopByte) {var file = document.getElementById(files4).files[0];var start = parseInt(opt_startByte) || 0;var stop = parseInt(opt_stopByte) || file.size - 1;var reader = new FileReader();reader.onloadend = function(evt) {if (evt.target.readyState == FileReader.DONE) {document.getElementById(byte_content).textContent = evt.target.result;document.getElementById(byte_range).textContent =[Read bytes: , start + 1, - , stop + 1, of , file.size, byte file].join();}};var blob = file.slice(start, stop + 1);reader.readAsBinaryString(blob);}JAVASCRIPT11/14
  12. 12. 监视文件读取进度可以使用onloadstart和onprogress事件来监视读取进度No file chosenChoose File 停止读取停止读取安博中程在线function handleFileSelect5(evt) {reader = new FileReader();reader.onerror = errorHandler;reader.onprogress = updateProgress;reader.onabort = function(e) {alert(文件读取操作被取消);};reader.onloadstart = function(e) {document.getElementById(progress_bar).className = loading;};reader.onload = function(e) {progress.style.width = 100%;progress.textContent = 100%;setTimeout("document.getElementById(progress_bar).className=;", 2000);}reader.readAsBinaryString(evt.target.files[0]);}JAVASCRIPT12/14
  13. 13. 参考安博中程在线W3C 规范 - FileW3C 规范 - FileSystem APIW3C 规范 - FileWriterW3C 规范 - ProgressEventsW3C 规范 - Drag and DropMozilla Hacks: Interactive file uploadsMDC: Drag OperationsHTML5 Doctor: Native Drag and Drop········13/14
  14. 14. <Thank you!>微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad

×