他にも WEB アプリケーションで使いたい機能はありますが、まず一番簡単で誰でも利用してみたいと思う機能です。特に、getAsText() はいとも簡単にデータをインポートする方法なので、localStorage とあわせて使うととても威力のあるツールを作成する事ができます。 ファイル名はパスを含みませんが、複数ファイルをドラッグドロップできるので、利用方法はいろいろ想像できます。メソッドは以前からあるようなのですが、ドラッグドロップとあわせて使う事によって幅が広がっています。 getAsDataURL() メソッドはファイルの内容が base64 にエンコードされて取得され、getAsBinary() メソッドはその名のとおり、バイナリです。まだ詳細をチェックしていませんが、当然画像で使う事になるのでしょう
<div id="dropbox" style='border:solid 1px #000000;width:100;height:30px;'></div>
<script type="text/javascript">
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", function(event){
event.stopPropagation();
event.preventDefault();
}
, false);
dropbox.addEventListener("dragover", function(event){
event.stopPropagation();
event.preventDefault();
}
, false);
dropbox.addEventListener("drop", function(event){
event.stopPropagation();
event.preventDefault();
var dt = event.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log(file.fileName);
console.log(file.fileSize);
console.log(file.getAsText("shift_jis"));
console.log(file.getAsDataURL());
console.log(file.getAsBinary());
console.log(file.name);
console.log(file.size);
console.log(file.type);
}
}
, false);
</script>
このコードは リアルタイム html ですぐテストできます。 ※ Firebug を使ってお試し下さい。(Firebugを開いてから「ページ作成」してドラッグドロップ) 関連する mozilla ドキュメント Selecting files using drag and drop
|
|
【Firefoxの最新記事】
- Firefox の Firebug で、実行済みのページのソースをクリップボードにコピーする
- Firefox のアドオンのサンプルを使って『作成方法』を知る為の準備
- Firefox ヘルプ : 新しいタブが最後のタブの右側に表示されない
- Greasemonkey で、NAVER まとめの表示順の初期表示を『更新順』にする
- Firefox で localStorage を編集するアドオン(FireStorage)は、GNU GPL なのでダウンロード(インストール) できるようにしました
- Firefox6 の postMessage でオブジェクトが引き渡されるのを確認しました
- Firefox6 : 気になる変更点、postMessage のオブジェクト引き渡しと、アドレスバーのスクリプトの直接入力
- Firefox で localStorage を編集するアドオン
- Firefox4 専用。XMLHttpRequest を使用した複数ファイルのアップロード
- Firefox4 : 複数選択ファイルアップロードの準備
- Firefox 4.0 のオレンジ色のアプリケーションメニューとメニューバー
- Firefox 4.0 限定機能らしい「XPIファイルを展開しない」というオプション変更できる Configuration Mania というアドオン
- Firefox でのクッキーのメンテナンス( 標準で利用できるツールの場合 )
- Firefox で簡単にクッキーを削除する方法
- Firebug の変更可能なショートカットのデフォルト値
- Firebug で要素を調査 / Firefox アドオン
- Greasemonkey でSeesaa の記事投稿のテキストエリアの右上に保存ボタンと記事一覧画面の一括編集ボタン
- Greasemonkey : YouTube にダウンロードリンクを付加
- Firefox拡張のバージョン制限の直接書き換え
