HTML5 - HTMF5 File API で画像をアップロードしてプレビュー - Qiita

2014/07/10 82 users Qiita onChange プレビュー Files File

<input type='file'/> で画像を選択させる input.onchange が発火するのでコールバックをとる File APIがあれば input.files[0] にFileオブジェクトが入ってるの抜き取る FileReader の FileReader#readAsDataURL に Fileオブジェクトを渡す FileRead#onload が発火するのでevent.targ... 続きを読む

iOS6のSafariでサポートされるHTML5の機能 ｜ クラスメソッド開発ブログ

2012/09/30 292 users クラスメソッド開発ブログ iOS6のSafari 機能 以下

以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。 最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTML5の機能を試して見ようと思います。 試したのは以下の5つです。iPhoneで確認できるようにサンプルを作ったので試してみて下さい。 ファイルアクセス(File API)とカメラ(HTML Media Capture) ... 続きを読む

404 Blog Not Found:ブラウザー上でJPEG圧縮して非可逆性を体感してみる

2012/09/09 63 users JPEG Qua ブラウザー上 Demo Quality

「GIMPでJPEGの蚊を退治して"PNG"化する」「javascript - で bilateral filter (選択的ガウスぼかし)を実装してみた」の反響で、「JPEGのqualityを100に設定すればいいんじゃね?」という誤解がかなり見受けられたので。 実際に体験していただければいいかと。 Demo: File APIを実装しているブラウザーで動きます。ファイルを読み込ませたら、Qua... 続きを読む

JavaScriptでファイル操作！？ File APIを使いこなそう － ＠IT

2011/12/16 592 users ファイル操作 JavaScript ナオキ Twitter上

連載：人気順に説明する初めてのHTML5開発 JavaScriptでファイル操作！？ File APIを使いこなそう WINGSプロジェクト　ナオキ（監修：山田祥寛） 2011/12/16 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やG... 続きを読む

HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - まめしば雑記

2011/07/02 411 users API しば雑記 Drag and drop 中身 ブラウザ

HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。今回は JavaScript の処理... 続きを読む