• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
File API in Firefox3.6
 

File API in Firefox3.6

on

  • 2,669 views

2009/12/19 Mozilla勉強会@東京でのLT発表資料です。内容はFile APIの簡単な使い方(サンプルコード)です。

2009/12/19 Mozilla勉強会@東京でのLT発表資料です。内容はFile APIの簡単な使い方(サンプルコード)です。

Statistics

Views

Total Views
2,669
Views on SlideShare
2,268
Embed Views
401

Actions

Likes
0
Downloads
4
Comments
0

4 Embeds 401

http://blog.bornneet.com 391
http://www.slideshare.net 5
http://webcache.googleusercontent.com 4
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

File API in Firefox3.6 File API in Firefox3.6 Presentation Transcript

  • File API in Firefox3.6 with HTML5 D&D tnantoka
  • • tnantoka • SE • JavaScript • blog.bornneet.com
  • W3C File API
  • File API • <input type="file" /> JavaScript • HTML5#Drag and Drop
  • • html5.bornneet.com/file/multi/ • dataURI html5.bornneet.com/file/datauri/
  • Web UI
  • File <textarea>
  • $(function() { ..... <textarea>
  • html 1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Textarea D&D</title> 6 <link rel="stylesheet" href="style.css" /> 7 <script src="script.js"></script> 8 </head> 9 <body> 10 <p> 11 <textarea id="dropbox"></textarea> 12 </p> 13 </body> 14 </html>
  • css 1 @charset "UTF-8"; 2 p { 3 text-align: center; 4 } 5 textarea { 6 width: 500px; 7 height: 300px; 8 } /* dragover */ 9 .over { 10 border: 3px solid orange; 11 }
  • dragover 1 var db = document.getElementById('dropbox'); 2 db.addEventListener('dragover', function(e){ // 3 e.preventDefault(); // 4 db.className = 'over'; 5 }, true);
  • dragleave 1 db.addEventListener('dragleave', function(e){ // 2 db.className = ''; 3 }, true);
  • drop 1 db.addEventListener('drop', function(e) { // e.stopPropagation(); 2 e.preventDefault(); // 3 var file = e.dataTransfer.files[0]; 4 var reader = new FileReader(); 5 reader.onloadend = function() { 6 db.value = reader.result; 7 }; 8 reader.readAsText(file); 9 }, true);
  • html5.bornneet.com/file/textarea/
  • Mozilla
  • Jetpacking tnantoka.net/jetpack/dropta/
  • • ON/OFF - ^^ • - getEventListener • - Web Workers • about:jetpack#Develop Bespin -
  • • • W3C FileAPI in Firefox 3.6 http://hacks.mozilla.org/2009/12/w3c- fileapi-in-firefox-3-6/