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