FileAPIを使うと、画面上にドラッグ＆ドロップされたファイルを扱える。
ただしフォルダは扱えない。下記サンプルにD&Dすると「typeを取得できませんでした」になる。
ファイルであってもPathは取得できないので、単一ファイルの入力に対して何かを返すアプリケーションを作る時だけ使える。
ちなみにHTML5以前のHTMLにiframeエレメントを入れて、その中にHTML5のページを表示してFileAPIを利用する…というのはブラウザでは可能。HTAでは不可。
ただしフォルダは扱えない。下記サンプルにD&Dすると「typeを取得できませんでした」になる。
ファイルであってもPathは取得できないので、単一ファイルの入力に対して何かを返すアプリケーションを作る時だけ使える。
ちなみにHTML5以前のHTMLにiframeエレメントを入れて、その中にHTML5のページを表示してFileAPIを利用する…というのはブラウザでは可能。HTAでは不可。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| </head> | |
| <title>D&D</title> | |
| <body> | |
| <script type="text/jscript"> | |
| if(!window.File){ | |
| document.body.innerText = 'FileAPIが使用不能' | |
| }else{ | |
| doNothing = function(e){ | |
| // e.stopPropagation() | |
| e.preventDefault() | |
| } | |
| document.addEventListener("dragover", doNothing) | |
| document.addEventListener("drop", function(e){ | |
| doNothing(e) | |
| var files = e.dataTransfer.files | |
| if(!files){return} | |
| try{document.title = files[0].type}catch(e){return document.body.innerText='typeを取得できませんでした'} | |
| // if(!files[0].type.match('text.*')){return} // hta…application/hta | |
| var R=new FileReader() | |
| R.onload=function(ev){ document.body.innerText=R.result } | |
| R.readAsText(files[0], 'shift-jis') | |
| }) | |
| } | |
| // https://msdn.microsoft.com/ja-jp/library/hh673539(v=vs.85).aspx | |
| </script> | |
| </body> | |
| </html> |
0 件のコメント:
コメントを投稿