今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ 今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。 １：ドラッグ＆ドロップAPI 画面上の要素を。 画面外から。 ２：File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。 ※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では，ここから３分の時間のカウントを開始。集中して読もう。 （0：00〜前半の１分半） 画面内でのドラッグ・ドロップ （後半の1：30〜3：00） 画面外からのドラッグ・ドロップ 参考資料 （0：00〜前半の１分半）画面内でのドラッグ・ドロップ まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル１ ht
HTML5 の File API でローカルファイルを扱ってみる
HTML5 の File API でローカルファイルを扱ってみる HTML5 の File API を使用することでドラッグ＆ドロップでの複数ファイルの取得や、ローカルファイルのちょっとした加工などができるようになりました。 この記事では、画像とテキストファイルを簡単に表示する方法をご紹介します。 投稿日2012年12月13日 更新日2012年12月13日 html html はファイルをドロップする div と表示する div を用意します。 html <p> ファイルをドロップしてください。</p> <div id="file-input"> <div class="input"></div> <div class="out"></div> </div> cssでドロップするdivを大きくしておくと良い感じだと思います。 css #file-input div.input { padd
TM Life - HTML5 File API を使ってファイル読み込み
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. HTML5 で追加された File API. これを使えば ローカルファイルの情報, 中身を取得して JavaScript でいじることができます. 今後, HTML5 の普及とクラウド化が進むにつれて重要な機能になることは間違いありません. サンプルを作ってみたのでよかったらぜひ. ドラッグ & ドロップにも対応しているよん♪♪ Chrome でローカル上で作業する場合, セキュリティ上ドラッグ & ドロップに反応しない場合があります. その場合, Chromeの起動オプションに –allow-file-access-from-files を指定することで読み込めるようになります. SAMPLE And D
File API入門 | 前編 File APIとFileReader APIの利用
読み込み完了時にデータを表示する とても簡単に書けます。HTMLは最初のものと同じです。 var inputFile = document.getElementById('file'); var reader = new FileReader(); function fileChange(ev) { var target = ev.target; var file = target.files[0]; var type = file.type; var size = file.size; if ( type !== 'image/jpeg' ) { alert('選択できるファイルはJPEG画像だけです。'); inputFile.value = ''; return; } reader.readAsDataURL(file); } function fileLoad() { consol
File APIとJavaScriptを使って、テキストファイルを加工する便利ツールを作った - あと味
昨日、たまたま仕事で、CSV形式の名簿を加工する必要があって、最近はこういう時、JavaScriptを使って加工することがあります。 昨日の話で言うと、具体的には以下のようなCSVファイルを、 ほげ株式会社,jdg,jdg@example.com 株式会社ふが,taiju,taiju@example.com 有限会社ぴよ,foo,foo@example.com以下のように加工しなければならないケースでした。 jdg＠ほげ株式会社,jdg@example.com taiju＠株式会社ふが,taiju@example.com foo＠有限会社ぴよ,foo@example.com「会社名,名前,メールアドレス」で構成されているCSVを「名前＠会社名,メールアドレス」で構成したCSVに加工するってことです。 こういう時、今までは、まずはテキストエディタの置換を使って、以下のような配列オブジェクトに
ときどきWEB | HTML5のFile APIでローカルファイル情報取得してやんよ!!!
そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
