![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);](https://image.slidesharecdn.com/mozillatokyo-091219104028-phpapp02/85/File-API-in-Firefox3-6-14-320.jpg)
More Related Content
What's hot (9)
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="?le" /> JavaScript ? HTML5#Drag and Drop
- 5. ? html5.bornneet.com/?le/multi/ ? dataURI html5.bornneet.com/?le/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=/slideshow/file-api-in-firefox36/2750248/"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- ?leapi-in-?refox-3-6/