SQLの窓

2011年03月28日


Firefox4 : ローカルPCからファイルをドラッグドロップしてファイルの中身を使用する事ができます

他にも WEB アプリケーションで使いたい機能はありますが、まず一番簡単で
誰でも利用してみたいと思う機能です。特に、getAsText() はいとも簡単に
データをインポートする方法なので、localStorage とあわせて使うととても
威力のあるツールを作成する事ができます。

ファイル名はパスを含みませんが、複数ファイルをドラッグドロップできる
ので、利用方法はいろいろ想像できます。メソッドは以前からあるようなの
ですが、ドラッグドロップとあわせて使う事によって幅が広がっています。

Flex を使うと、ファイルを開くダイアログを使って1ファイルは可能です
が、Flex そのものが簡単に使えるような一般的なものではありません。
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の最新記事】
posted by lightbox at 2011-03-28 00:27 | Firefox | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり