#fileapi

[positronx]

Learn to consume HTML5 FileReader API to upload single and multiple image and text files from the client side in the web or mobile browser locally.

[hinatabokori]

FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 FileAPI を用いて、画像を選択またはドラッグ&ドロップで、画像を表示させるものをつくりました。 また、画像のwidth, heightとDataURLを表示させるもの 目次 実際のページ コード 参考リンク 実際のページ http://cartman0.github.io/FileAPI_Sample_SlectReadPrintImage/

[thefrontrowblog]

HTML5 File API 筆記 (1) 基本名詞解釋

HTML5 多了 File API，可以透過 JavaScript 來處理到本機的檔案。下面有幾個 Interface，稍微筆記一下：

FileList

HTML5 的檔案欄位支援選取多個檔案一次上傳，只需要加上 "multiple" 屬性。要拿到檔案欄位目前選取的檔案清單，可以直接跟該欄位要 files 屬性：

<input id="fileField" name="files[]" type="file" multiple /> var fileList = document.querySelector('#fileField').files

這樣會回傳一個 FIleList 物件回來，結構上類似陣列，有 length 屬性、也可以用 item(n) 的方法要到清單中的第 n 個檔案。其實也可以直接像陣列一樣直接跟他要 fileList[n]。這份檔案清單裡面放的是 File 物件的集合，下面會提到這個類別，但總之就是一個個檔案。

不過講這麼多，不如直接看 console 下面拿到什麼：

Blob

Blob 在 Spec 上面寫是「 不可變的 原始資料」(immutable raw data)，我在這邊解讀為檔案的原始碼（不是給肉眼判讀的形式）、或稱資料片段。Blob 物件有兩個屬性：

size: 傳回 Blob 物件的大小（單位是 bytes）

type: 傳回 Blob 物件的 MIME type（例如 image/png）

Blob 物件另外帶有 slice 方法跟 close 方法，前者可以從 Blob 當中切出更小的 Blob（也就是擷取其中的片段）、後者則顧名思義是把這個 Blob「關掉」—從結果上來看就是這個 Blob 就不能再使用了。

File

既然 Blob 本身就是代表一個/一段資料或檔案，那 File 繼承 Blob 也是合情合理。從上面 FileList 的範例圖中，也可以看到 File 物件帶有跟 Blog 物件相同的屬性。

不過 File 類別比起 Blob 多了兩個屬性，分別是 name 跟 lastModifiedDate：相信這兩個屬性應該「一望即知」，不需要多做解釋。

實際要把檔案讀進來使用，需要用到 FileReader Interface，這個分第二篇來筆記。

[atatametetaberu]

[potjs]

JavaScriptライブラリ Pot.js のチートシートと壁紙用ジェネレータ作りました

Pot.js チートシートとジェネレータ ができました。

Cheat Sheet

現時点では、PotLite.js のぶんです。 他のライブラリのチートシートを参考にしながら作ってたのですが、 Pot.js のほうはまだリファレンスも全部書けてないので 重要な非同期系の関数/メソッド/プロパティに絞ってたら PotLite.js と同じになりました。 はじめからそうしてればよかった。。

Pot.js (PotLite.js) チートシートとジェネレータ

Cheat Sheet Generator

自分で関数の存在を忘れてしまうことがあって それもどうかと思うので、忘れないように壁紙にできたらなぁて思って せっかくだからいつも使ってる壁紙とか好きな画像とアルファ合成できたらいいなって ジェネレータ作ってみました。 canvas で DataURI にして合成してるだけですが…。(なので Firefox, GoogleChrome, Safari? 限定) 上のリンクからジェネレータのページに行って、 デスクトップとかからブラウザに画像ドロップして合成・生成できます。 ※ソースでも確認できますが画像とかをどっかに送信したり保存したりしてません 通常のチートシートは Basic Cheat Sheet のをダウンロードして利用できます。

ジェネレータはこんな感じで背景と合成できます。

以下、Pot.js についてのリンクとか。

Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。 PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。 ダウンロード

Pot.js / PotLite.js 最新

マニュアル

Pot.js + PotLite.js - Document and Reference - JavaScript Async Utility Library

その他の情報についてはマニュアル/リンク から参照ください。

レポジトリ

polygonplanet/Pot.js - GitHub

その他、なにか問題・バグ・感想・指摘などあれば、 コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。

body div.pot-overlay-content { line-height: 1.4; } .pot-overlay-content h2 { font-size: 150%; margin-top: 38px; margin-bottom: 30px; } dl dt { font-style: normal; font-weight: bold; } body div.pot-separator-image, body div.pot-separator-image-full { display: block; margin: 10px; padding: 0; text-align: left; } body div.pot-separator-image a, body div.pot-separator-image-full a { margin-left: 1em; margin-right: 1em; } body div.pot-separator-image a img, body div.pot-separator-image-full a img { border: 2px solid #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } body div.pot-separator-image a img.notify, body div.pot-separator-image-full a img.notify { border: 0 none; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; } body div.pot-separator-image a img.portrait, body div.pot-separator-image-full a img.portrait { border: 1px solid #666; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; } body div.pot-overlay-content div.pot-separator-image-full { padding-left: 0 !important; padding-right: 0; margin-left: 0 !important; margin-right: 0; } body div.pot-overlay-content div.pot-separator-image-full a { margin-left: 0; margin-right: 0; }

[potjs]

HTML5 File APIでドラッグ＆ドロップのサンプル-Pot.js+PotLite.jsリリースノート

Pot.js 1.11 と PotLite.js 1.28 リリースしました。 主な新機能として、HTML5 の File API を使った ファイルのドラッグ＆ドロップ を扱う Pot.DropFile を実装しました。 Pot.DropFile は FileReader でドロップされたファイルをアップロードしたり 内容やサイズを取得してその場で処理することが可能です。

HTML5 とドラッグ＆ドロップイベントをサポートしてるブラウザ (Firefox, GoogleChrome, Safari) で このブログ内に、デスクトップなどから画像やテキストなどの適当なファイルをドロップしてみてください。

ここにドロップされたファイル内容が表示されます。

$(function () { // ドロップされた結果を表示する div var targetId = '#dropfile-container'; // ドロップ用のパネルを作成 var panel = $('<div/>').css({ position : 'fixed', left : '10%', top : '10%', width : '80%', height : '80%', minHeight : 200, background : '#ff8cd3', zIndex : 9999999, display : 'table', textAlign : 'center', WebkitBoxShadow : '1px 1px 10px #333', MozBoxShadow : '1px 1px 10px #333', boxShadow : '1px 1px 10px #333' }) .append( $('<div/>') .css({ display : 'table-cell', color : '#fff', fontWeight : 'bold', verticalAlign : 'middle', fontSize : '160%' }) .text('ここにファイルをドロップします') ) .hide() .appendTo('body'); // ファイルの情報を表示する関数 var showFileInfo = function(name, size, type) { $('<div/>') .text(name + ' (' + type + ' ' + size + 'bytes)') .appendTo(targetId); }; // ----- ここから処理の中心 ----- // 設定と共にインスタンスを生成 var dropFile = new Pot.DropFile(panel, { // メッセージを表示すべき時 onShow : function() { panel.show() }, // メッセージを非表示にすべき時 onHide : function() { panel.hide() }, // ドロップ時の処理 onDrop : function(files) {}, // 画像がドロップされた時 onLoadImage : function(data, name, size, type) { showFileInfo(name, size, type); $('<img/>') .attr({src : data}) .css({maxWidth : 500, maxHeight : 500}) .appendTo(targetId); }, // テキストがドロップされた時 onLoadText : function(data, name, size, type) { showFileInfo(name, size, type); $('<textarea/>') .val(data) .css({width : '90%', height : 300}) .appendTo(targetId); }, // 不明なファイルがドロップされた時 onLoadUnknown : function(data, name, size, type) { showFileInfo(name, size, type); $('<textarea/>') .val(data) .css({width : '90%', height : 300}) .appendTo(targetId); }, // ドロップされたファイルが読み込めた時 (このときアップロードも可能) onLoadEnd : function(files) { // 今回は未使用 /* this.upload( 'http://www.example.com/', 'dropfiles' ).then(function(res) { alert('finish upload.\nresponse:\n\n' + res.responseText); }); */ } }); });

ソースコード

このサンプルのソースコードです。 DOM ノードを作成するのにあたって jQuery を使用しています。 HTML のソース:

<div id="dropfile-container" style="border-color: #ccc; border-style: dashed; border-width: 1px 0 1px 0; margin: 10px;"> ここにドロップされたファイル内容が表示されます。 </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://api.polygonpla.net/js/pot/1.11/pot.min.js"></script>

JavaScript のソース:

$(function () { // ドロップされた結果を表示する div var targetId = '#dropfile-container'; // ドロップ用のパネルを作成 var panel = $('<div/>').css({ position : 'fixed', left : '10%', top : '10%', width : '80%', height : '80%', minHeight : 200, background : '#ff8cd3', zIndex : 9999999, display : 'table', textAlign : 'center', WebkitBoxShadow : '1px 1px 10px #333', MozBoxShadow : '1px 1px 10px #333', boxShadow : '1px 1px 10px #333' }) .append( $('<div/>') .css({ display : 'table-cell', color : '#fff', fontWeight : 'bold', verticalAlign : 'middle', fontSize : '160%' }) .text('ここにファイルをドロップします') ) .hide() .appendTo('body'); // ファイルの情報を表示する関数 var showFileInfo = function(name, size, type) { $('<div/>') .text(name + ' (' + type + ' ' + size + 'bytes)') .appendTo(targetId); }; // ----- ここから処理の中心 ----- // 設定と共にインスタンスを生成 var dropFile = new Pot.DropFile(panel, { // メッセージを表示すべき時 onShow : function() { panel.show() }, // メッセージを非表示にすべき時 onHide : function() { panel.hide() }, // ドロップ時の処理 onDrop : function(files) {}, // 画像がドロップされた時 onLoadImage : function(data, name, size, type) { showFileInfo(name, size, type); $('<img/>') .attr({src : data}) .css({maxWidth : 500, maxHeight : 500}) .appendTo(targetId); }, // テキストがドロップされた時 onLoadText : function(data, name, size, type) { showFileInfo(name, size, type); $('<textarea/>') .val(data) .css({width : '90%', height : 300}) .appendTo(targetId); }, // 不明なファイルがドロップされた時 onLoadUnknown : function(data, name, size, type) { showFileInfo(name, size, type); $('<textarea/>') .val(data) .css({width : '90%', height : 300}) .appendTo(targetId); }, // ドロップされたファイルが読み込めた時 (このときアップロードも可能) onLoadEnd : function(files) { // 今回は未使用 /* this.upload( 'http://www.example.com/', 'dropfiles' ).then(function(res) { alert('finish upload.\nresponse:\n\n' + res.responseText); }); */ } }); });

Pot.js / PotLite.js

Pot.js は非同期イテレータと文字列処理を中心とした JavaScript ライブラリです。 Web ブラウザ上や Node.js 上、 UserScript や XUL 上で動作します。 この例のような DOM や HTML5 File API が含む処理は Node.js などの環境では意味がありませんが テキスト処理やイテレータなどを利用するメリットがあります。 とくに非同期処理を扱う Deferred オブジェクトにより作業効率が向上すると思います。 PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。 ダウンロード

Pot.js / PotLite.js 最新

マニュアル

Pot.js + PotLite.js ドキュメント リファレンス

マニュアルは 2012-01-11 現在、まだすべてのオブジェクトの解説ができてません。。 その他の情報についてはマニュアルから参照ください。

レポジトリ

polygonplanet/Pot.js - GitHub

body div.pot-overlay-content { line-height: 1.4;}.pot-overlay-content h2 {font-size: 150%; margin-top: 38px; margin-bottom: 30px;}dl dt {font-style:normal; font-weight: bold;} body div.pot-separator-image,body div.pot-separator-image-full { display: block; margin: 10px; padding: 0pt; text-align: left;} body div.pot-separator-image a,body div.pot-separator-image-full a {margin-left: 1em; margin-right: 1em;} body div.pot-separator-image a img,body div.pot-separator-image-full a img { border: 2px solid #999;border-radius:3px; -moz-border-radius:3px;-webkit-border-radius:3px;} body div.pot-separator-image a img.notify,body div.pot-separator-image-full a img.notify { border: 0 none; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset;} body div.pot-separator-image a img.portrait,body div.pot-separator-image-full a img.portrait { border: 1px solid #666; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25) inset; } body div.pot-overlay-content div.pot-separator-image-full { padding-left: 0 !important; padding-right: 0; margin-left: 0 !important; margin-right: 0; } body div.pot-overlay-content div.pot-separator-image-full a {margin-left: 0; margin-right: 0;}

[dayjs-blog]

這是個上傳大檔案的library，用FileAPI去把檔案「斬件」(chunk)+回復、外加容許暫停(resuming):

The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause and resume uploads without loosing state.

因為是用fileAPI所以只有FF4+和chrome才有用。

[tommmmy]