Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

File API in Firefox3.6

2,306 views

Published on

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

Published in: Technology
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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/

×