Más contenido relacionado
La actualidad más candente (9)
File API in Firefox3.6
- 5. •
html5.bornneet.com/file/multi/
• dataURI
html5.bornneet.com/file/datauri/
- 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);
- 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/