JavaScriptでファイル操作！？ File APIを使いこなそう
<textarea id="text" placeholder="テキストを入力してください。"></textarea><br /> <button id="btndownload">ファイル作成</button> <div id="disp"> </div> <script type="text/javascript"> document.getElementById("btndownload").addEventListener("click", function () { var text = document.getElementById("text").value; var blobBuilder; // （1）BlobBuilderの作成 if ("MozBlobBuilder" in window) { blobBuilder = new MozBlobBuilder();
Read files in JavaScript | Articles | web.dev
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism
社内で使用するファイルアップローダを作ることになりました。 実装段階では従来の「ファイルを選択」ボタンを押して、ダイアログ内でファイルを選択する仕様だったのですが、操作を見ているとかなり深い階層のファイルをアップロードするようなこともあるようで、階層たどっていくのが手間なように感じたため、ドラッグ&ドロップでファイルをアップロードできるように仕様を変更しました。 実装手順をメモとして残しておきます。 仕様、完成図 まずは完成図から。 仕様は、 ドラッグ&ドロップでファイルをアップロード 従来の「ファイルを選択」ボタンからでも可 複数ファイルに対応 という感じにしてみました。 htmlの内容 <div id="drag-area"> <p>アップロードするファイルをドロップ</p> <p>または</p> <div class="btn-group"> <input type="file" m
ときどき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
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアプリケーションからのファイルの使用
