File API in Firefox3.6

2,271 views

Published on

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

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
2,271
On SlideShare
0
From Embeds
0
Number of Embeds
417
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • File API in Firefox3.6

    1. 1. File API in Firefox3.6 with HTML5 D&D tnantoka
    2. 2. • tnantoka • SE • JavaScript • blog.bornneet.com
    3. 3. W3C File API
    4. 4. File API • <input type="file" /> JavaScript • HTML5#Drag and Drop
    5. 5. • html5.bornneet.com/file/multi/ • dataURI html5.bornneet.com/file/datauri/
    6. 6. Web UI
    7. 7.
    8. 8. File <textarea>
    9. 9. $(function() { ..... <textarea>
    10. 10. 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>
    11. 11. 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 }
    12. 12. dragover 1 var db = document.getElementById('dropbox'); 2 db.addEventListener('dragover', function(e){ // 3 e.preventDefault(); // 4 db.className = 'over'; 5 }, true);
    13. 13. dragleave 1 db.addEventListener('dragleave', function(e){ // 2 db.className = ''; 3 }, true);
    14. 14. 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);
    15. 15. html5.bornneet.com/file/textarea/
    16. 16. Mozilla
    17. 17. Jetpacking tnantoka.net/jetpack/dropta/
    18. 18. • ON/OFF - ^^ • - getEventListener • - Web Workers • about:jetpack#Develop Bespin -
    19. 19. • • W3C FileAPI in Firefox 3.6 http://hacks.mozilla.org/2009/12/w3c- fileapi-in-firefox-3-6/

    ×