readAsText() メソッドは、指定された Blob または File の内容を読み取るために使用します。読み取り操作が完了すると、 readyState が DONE に変わり、 loadend イベントが発生し、 result プロパティにはファイルの内容が文字列として格納されます。
このエントリで紹介するBlobやFile、FileReaderはHTML5で利用可能になったAPIで、ECMAScriptで定義されているわけではない。 そのため、Node.jsには存在せず、ブラウザ環境でのみ利用できる。 Blob Blobは、バイナリデータを表すimmutableなオブジェクト。 const blob = new Blob(['<xml>foo</xml>'], {type: 'text/xml'}); console.log(blob); // Blob(14) {size: 14, type: "text/xml"} 第二引数で設定しているtypeで、MIMEを設定できる。 何も設定しなかった場合は空の文字列になる。 File Fileはその名の通りファイルを表すオブジェクトで、Blobを継承している。 const file = new File(['<xml>fo
こんにちは。 久々の更新になってしまいました。 今回はJavaScriptについてです。 先日とある人から「ボタンを押した数をカウントしてテキストファイルに保存したい」という要望がありました。 要望だけ見ればものすごく簡単です。 ただ、今回はWebサーバ環境はないのでローカルだけで処理したい(PHP等が使えない)ということだったため、JavaScriptで実現しようと思いました。 しかしJavaScriptは基本的にはローカルファイルを扱えません。 そこで色々と調べた結果、HTML5のFile APIというのを使うと実現出来るようなのでやってみました。 一応実現出来たため、メモとして残しておきます。 以下ソースコードです。 <!DOCTYPE html> <html> <head> <script src="jquery-1.7.1.min.js"></script> <script ty
ArrayBuffer は物理メモリが確保できなければ問答無用で失敗しますが、Blob は柔軟に動作します。ブラウザによっては、ローカルストレージを駆使してでも超巨大なバイナリの取り扱いを試みます。
createObjectURL、省メモリだとかaudioの再生がスムーズだとか言われてるけど、これが何物なのか日本語の詳しい説明が見当たらないので、自分の理解を書いておく。File APIの仕様書を軽く流し読みして得た理解なので正確さは保証しない。ま、大筋は間違っちゃないと思う。 createObjectURLはFileオブジェクトのURL(Blob URL)を作成するもの。httpスキームのURLがサーバ上のリソースを指しているように、Blob URLは自分のPCのメモリ上にあるリソースを指し示す。 FileReaderのreadAsDataURLメソッドを使うとfileオブジェクトを元にURLを作成できるが、これはData URLで、URLエンコードされたファイルの中身そのもの。よって、ファイルを読み込んでData URLを作成すると、JavaScriptエンジンはファイルサイズに比例
input[type=file]使って投稿画像を表示する時、 大抵の場合はFileReaderオブジェクトのreadAsDataURLメソッドを使うサンプルをよく見かけるけど、 Android4.0だと動作が不安定だった。 $(function(){ var $input = $('#js-input'), $result = $('#js-result'); $input.on('change', function(e){ var file = e.target.files[0]; if (!file) { return; }; var filereader = new FileReader(); filereader.onload = function(e){ var url = e.target.result, $img = $('<img>').on('load error', f
jQuery.ajax()でファイルをアップロードする方法を紹介します。 1.はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
株式会社アットステージは、スマートフォン向けゲームアプリやツールアプリの企画・開発を通じて、「人と人とが繋がる」をコンセプトにサービスを提供するデベロッパーです。
こんちには、鈴木です。 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> <
社内で使用するファイルアップローダを作ることになりました。 実装段階では従来の「ファイルを選択」ボタンを押して、ダイアログ内でファイルを選択する仕様だったのですが、操作を見ているとかなり深い階層のファイルをアップロードするようなこともあるようで、階層たどっていくのが手間なように感じたため、ドラッグ&ドロップでファイルをアップロードできるように仕様を変更しました。 実装手順をメモとして残しておきます。 仕様、完成図 まずは完成図から。 仕様は、 ドラッグ&ドロップでファイルをアップロード 従来の「ファイルを選択」ボタンからでも可 複数ファイルに対応 という感じにしてみました。 htmlの内容 <div id="drag-area"> <p>アップロードするファイルをドロップ</p> <p>または</p> <div class="btn-group"> <input type="file" m
File APIFileReaderコンストラクターFileReader()インスタンスプロパティerrorreadyStateresultインスタンスメソッドabort()readAsArrayBuffer()readAsBinaryString() 非推奨 readAsDataURL()readAsText()イベントaborterrorloadloadendloadstartprogress継承EventTargetFile API に関連するページBlobFileFileListFileReaderSync FileReader オブジェクトを使用すると、ウェブアプリケーションは、ユーザーのコンピューターに保存されているファイル(または生のデータバッファー)の内容を非同期に読み取ることができます。File または Blob オブジェクトを使用して、読み込むファイルまたはデータを指定
そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP
iOS/Androidで、サムネイル表示+アップロードキャンセル可能な複数ファイルアップロードをFileAPIでやるJavaScriptHTML5 HTML5のFile APIを使ってファイルのリアルタイムサムネイル表示なんて、もはや一般的に使われているネタなんだけど、今回はファイル参照ボタンをオリジナルデザインのボタンにしつつ、選択後、個別でキャンセルが出来るようにしてみた。 んだけど、Android Browserで一部、関係ないところで動かなかったりして色々はまってしまった。っていうか、Androidのバージョンによるのかもだけど、そもそもmultiple時に一度に複数画像が選択できないんだけど…。これはどのAndroid機でも同じなのかな。 というわけで、仕様の若干違う2パターン作ってみた。 パターンA 仕様 Android Browserでは動かないので、微妙だけど。 一度に選択
$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; // 画像以外は処理を停止 if (! file.type.match('image.*')) { // クリア $(this).val(''); $('span').html(''); return; } // 画像表示 var reader = new FileReader(); reader.onload = function() { var img_src = $('<img>').attr('src', reader.result); $('span').html(i
Posted: 2012.12.13 / Category: javascript / Tag: HTML5, jQuery HTML5 の File API を使用することでドラッグ&ドロップでの複数ファイルの取得や、ローカルファイルのちょっとした加工などができるようになりました。 この記事では、画像とテキストファイルを簡単に表示する方法をご紹介します。 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
input[type="file"]をAjaxで送信したい時 普通にAjaxを使って送ると、ファイルが文字列になってしまい form.submit()した時と違うのでハマったのでメモ。 どうやら FormData を使い Ajaxが自動的に送信データを整形する機能をOFFにすれば form.submit()と同じデータで送れるようです。 ■ フォーム <form id="myForm" name="myForm" method="post" action=""> <input type="file" name="file" id="formFile"/> <input type="text" name="text" id="formText"/> <textarea name="textarea" id="formTextarea"></textarea> <input type="sub
AngularJSでファイルをアップロードしたい。画像の場合はアップロード前にプレビューもしたい(追記:さらにドラッグアンドドロップにも対応)。 私の書き方も悪いのでしょうけど、Angularだから特に楽ってことはないな。まあ、素直にng-file-upload使えばいいのだろうけど。 前提知識 <input type="file">のファイル(名)は標準ディレクティブでは取得できない。 FormDataを利用して、かつ、multipart/form-dataで送る。 つまり、カスタムディレクティブを定義する必要がある。 HTML(フロント) ソースは少々長いが、やっていることは至ってシンプル。要所はカスタムディレクティブのところ。 ディレクティブ名はキャメル形式が-とかに変わる(hogeFooはhoge-fooというディレクティブ名になる) DOMからscopeへの値の紐付けのタイミング
Ajaxを使用してファイルをドラッグ&ドロップでサーバにアップロードする方法 ローカルPC上のファイルをドラッグ&ドロップでサーバに複数ファイルを同時にアップすることが可能になります。 下のgifのようなアップロードが可能になります。 javascriptとHTML側 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ファイルのアップロード</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> </script> <script type="text/javascript"> $(function () { window.addEventL
JavaScriptプログラミングのTOPへ 今から3分で,HTML5の JavaScript API の使い方を2つ覚えよう。 1:ドラッグ&ドロップAPI 画面上の要素を。 画面外から。 2:File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで,これらの実装の方法を素早く学習する。 ※サンプルは,IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では,ここから3分の時間のカウントを開始。集中して読もう。 (0:00〜前半の1分半) 画面内でのドラッグ・ドロップ (後半の1:30〜3:00) 画面外からのドラッグ・ドロップ 参考資料 (0:00〜前半の1分半)画面内でのドラッグ・ドロップ まず,動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル1 ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く