ＳＱＬの窓
<< Canvas : 指定サイ… | TOP | Firefox4 専用。XML… >>

2011年05月22日


Firefox4 : 複数選択ファイルアップロードの準備

 
Using files from web applications - MDC Docs の最初の
★ Using hidden file input elements using the click() method
に沿って、ファイルアップロード用の複数選択のファイルフィールド
を作成して、選択結果を console.log で表示しています。

※ Google Chrome での動作を確認しました
( 但し、Google Chrome の場合非表示ではダイアログが出ません )

<input
	type="file"
	id="fileElem"
	multiple="true"
	accept="image/*"
	style="display:none"
	onchange="handleFiles(this.files)"
>  
<a href="#" id="fileSelect">複数ファイルの選択</a>

<script type="text/javascript">
// ファイル選択呼び出し用のリンク
var fileSelect = document.getElementById("fileSelect");
// クリックイベントの登録
fileSelect.addEventListener("click", function(e) {
	if (fileElem) {
		fileElem.click();
	}
	e.preventDefault(); // "#" での動きをキャンセルする
}, false);

// 非表示のファイル選択フィールド
var fileElem = document.getElementById("fileElem");

// 選択時のイベント
function handleFiles(files) {
	var fileList = files;

	// Firebug で表示
	for( var i = 0; i < fileList.length; i++ ) {
		console.log(fileList[i].fileName);
	}
}
</script>
【Firefoxの最新記事】
posted by lightbox at 2011-05-22 09:27 | Firefox | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり