JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
意外と知らないHTML5 API | 第1回 Drag & Drop APIとは
これらのイベントを使用してドラッグ＆ドロップを実装していきます。まずは最低限の機能を備えたサンプルを見てみます。 実装の最小構成 赤いボックスを下のエリアにドラッグ＆ドロップしてみてください。ドラッグしている要素がエリアに入ると、テキストがonDragOverとなり、ドロップされるとonDropになるのが確認できます。 ソースコード*は次のようになっています。 *注：JavaScriptのソースコード ソースコードの見通しをよくするためにjQueryを使用しています。 ... <div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div> ... ... $('#box').on('dragstart', onDragStart); $('#dropzone').on('dragover
HTML5のcanvas内の複数の画像をドラッグ＆ドロップさせてみる - Qiita
概説 「HTML5のcanvas内に複数の画像を任意の順序で表示する」で描画したcanvas内の画像をドラッグ＆ドロップしたい欲が湧いたので、コードを書いてみました。 ドラッグ＆ドロップは通常のDOMであれば、HTML5のDrag & Drop APIを利用することで簡単に対応可能です。 しかし、canvasに一度描いてしまったオブジェクトは、DOMとして操作することができないため、座標を考慮した地味な実装が必要になります。 以下のようなサイトを参考にしながら、画像の重なり順と当たり判定を考えてやってみたところ、自分が「いかに座標に弱いか」ということがよく分かりました。。。 A Gentle Introduction to Making HTML5 Canvas Interactive dragging and resizing an image on html5 canvas 「Kine
HTML5でファイルのドラッグ＆ドロップ : まだプログラマーですが何か？
HTML5 の File API を使った、OS からウェブ画面へのファイルドラッグ＆ドロップを実現する方法を紹介します。 まず、何も準備しないでウェブ画面へファイルをドラッグ＆ドロップすると、デフォルト挙動によって、そのファイルがブラウザで開かれます。例えば画像ファイルをウェブ画面にドラッグ＆ドロップすると、その画像ファイルがブラウザ内で開かれて表示されます。 ドラッグ＆ドロップを実現するには、まずブラウザのこのデフォルト挙動を上書きして、別の挙動にするよう指定する必要があります。そのためにファイルドロップのエリア（<div>）への drop イベントに対して、preventDefault(); を指定しておく必要があります。これでファイルをドロップしてもブラウザでは開かなくなります。 また、ドロップイベントのパラメータである event の event.dataTransfer.fil
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
html5の File API を使って、アップロード無しで画像プレビュー - 超自己満足プログラミング
画像をプレビューするために、サーバへアップロードする必要がなくなります*1。 html fileのアップロードフォームにonchangeを仕込んでおきます。 あとは、プレビュー表示用の要素だけ準備。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form> <input type="file" name="file" onchange="preview(this)" /> </form> <hr /> <b>preview:</b><br /> <div id="preview_field"></div> </body> </html> javascript function preview(ele) { if (!ele.files.length) return; // ファイル未選択 var f
HTML5でローカルファイルのドラッグアンドドロップで画像ファイルを表示 - コンピュータクワガタ
HTML5でローカルの画像ファイルをファイルのアップロードなしでプレビューするというのをやってみたかったのでやってみました。 意外にというか、つまらないところで引っかかったのでメモしておきます。 まず、参考したサイトは以下の2つです。 html5の File API を使って、アップロード無しで画像プレビュー http://d.hatena.ne.jp/favril/20100506/1273143063 Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた http://d.hatena.ne.jp/scalar/20101026/1288068169 作ったのが以下のソースとなります。上記のサイトのコピペを駆使しております。 <!DOCTYPE html> <html> <head> <meta charset=
今から３分で，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 でドラッグ＆ドロップする | TECHSCORE BLOG | TECHSCORE BLOG
こんちには、鈴木です。 HTML5 には File API というものがあます。 File API を使うとローカル PC からブラウザにドラッグ＆ドロップされたファイルを扱うことができます。 ということで、今回は File API によるドラッグ＆ドロップ処理をご紹介します。 まずは以下の HTML から始めましょう！ <!DOCTYPE html> <html> <head> <title>HTML5 でドラッグ＆ドロップ</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function() { // TODO ここにドラッグ＆ドロップに必要な処理を記述します. }); </script> </head> <body> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
