ブラウザーにファイルを残せるFile system APIの使い方 (1/5)
HTML5では、Web StorageやWeb SQL/Indexed DBといった、JavaScriptでクライアントサイド（ブラウザー）にデータを保存する機能があります。今回紹介する「File system API」もそんな機能の1つですが、MacやWindowsのようなディレクトリを持ったファイルシステムにデータをファイルとして保存できます。 File system APIを使うと、Canvasに描いた画像をファイルとしてブラウザーに保存する、といったことができます。現在のところ、「Google Chrome」と、Android 4の「Chrome for Android」だけで利用できますが、特にスマートフォンでファイルが扱えるのは便利でしょう。 今回は、File system APIを使って簡単なファイラーを作ります。File system APIは非同期処理が多く、掲載している
html５のW3C FileAPIについて、調べてまとめた。 - それマグで！
html5のファイルAPIについて調べた。http://www.w3.org/TR/FileAPI/ を読みながら、メモ。やっぱり本家ドキュメントは頼りになるのね。 FileAPIはなにか ローカルファイルにアクセスできる。 アクセスできるローカルファイルはinput で指定された物だけ。*1 使い方 input に files タイプを指定するとFileAPIの対象になる。 <input type=files > filesタイプの読み込み方 file = document.forms[0].elements[0].files[0] このように、<input type=files/>へJS経由でアクセスできる。 input type=filesの項目は、複数ファイルの配列になっている。FileListオブジェクト呼ぶ FileList オブジェクト 通常の配列みたいなオブジェクトして定義
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
