jQuery | MT Systems

カテゴリー : jQuery

jQuery で HTML5 FilesAPI ファイルオブジェクトのプロパティにアクセスするには

2011年 6月16日

今頃 HTML5 の緒に就いたところで恥ずかしいのだが、早速つまずいた。古籏氏の「File APIでブラウザーからローカルファイルを操作」という記事で、jQuery で試そうとした結果、半日つぶしてしまった。が、一つ賢くなった、と自分を慰めている。

お題は選択されたファイルのファイル名、サイズ、ファイル種別(MIME Type)を表示する JavaScript プログラムである。

<h1>ファイル情報を表示する</h1>
<form action="./test.cgi" method="get">
	<input type="file" id="myFile" />
	<input type="button" id="fileInfo" value="ファイル情報を表示" />
</form>
<div id="result"></div>
<script>
	document.getElementById("fileInfo").addEventListener("click", function(){
		var fileData = document.getElementById("myFile").files[0];
		var txt = "ファイルの名前　："+fileData.name+"<br />";  // ファイル名
		txt += "ファイルのサイズ："+fileData.size+"<br />";   // サイズ(Bytes)
		txt += "ファイルの種類　："+fileData.type+"<br />";   // 種類(MIME Type)
		document.getElementById("result").innerHTML = txt;
	}, true);
</script>

FilesAPI では input 要素で file タイプを指定し、加えて「multiple」をアトリビュートに加えると、何とファイル選択で複数ファイルを選択する事ができるようになった。これで JavaScript などの力を借りなくても、一括転送できるようになった訳だ。

さて上のプログラムを jQuery に書き直してみる。

$(document).ready(function() {
	$("#fileInfo").click(function() {
		var fileData = document.getElementById("myFile").files[0];
		var txt = "ファイルの名前　："+fileData.name+"<br />";  // ファイル名
		txt += "ファイルのサイズ："+fileData.size+"<br />";   // サイズ(Bytes)
		txt += "ファイルの種類　："+fileData.type+"<br />";   // 種類(MIME Type)
		$("#result").html(txt);
	});
});
</script>

で OK なのだが、「document.getElementById(“myFile”).files[0]」が気に入らない。ここは「$(“#myFile”)」と指定して、ファイルオブジェクトのプロパティにアクセスしたい訳だ。

さんざん調べて分かったのだが、「prop()」メソッドを利用してファイルオブジェクトの「files」プロパティにアクセスできた。

	var fileData = $("#myFile").prop('files')[0];

オソマツサマでした。

コメントを書く

ソースプログラム	35,778
通常の圧縮	22,563
/h を付けて圧縮	18,829

ヘルプドキュメントをちらっと見たところ(英文なのでちらっとしか見れない orz)、使い方としてその他、統合開発環境の Visual Studio を使ってWebアプリケーションを構築する際、このモジュールを追加して自動で圧縮ソースを出力させたり、ajaxmin.dll を組み込んで他のアプリで利用できるようになっているようです。自分は Windows アプリケーションの開発からすっかり離れてしまったので、使う機会はないと思いますが。

コメントを書く

jQuery UIダイアログで input から val() で値が取り出せない

2010年 11月5日

はい、今日はこれで半日以上潰してしまいました… orz
発端は、Ajaxを利用してHTMLで戻ってきたフォームをダイアログウィンドウへ表示し、入力を取得しようとしたけどデータが取得できなかった、というものだ。

Ajaxは利用せず、それを簡略化したソースです。

<html>
<head>
<title>Test Dialog</title>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
get_name = function() {
	var md = $("<div><input id=\"name\" type=\"text\" value=\"\" /></div>");
	md.dialog(
	{
		modal: true,
		height: 100,
		width: 200,
		title: 'Input Dialog',
		resizable: false,
		buttons: {
			"OK": function() {
				alert($("#name").val());
				$(this).dialog('close');
			},
			"CANCEL": function() {
				$(this).dialog('close');
			},
		}
	});
}
</script>
</head>
<body>
<h1>UI Dialog Test</h1>
<input type="button" value="Fail Open" onclick="get_name()" /><br />
</body>
</html>

これは「Fail Open」ボタンを押すとダイアログが開き、入力域に文字を入れて「OK」をクリックすると、次のように入力した文字をアラート表示する、というものだ。

ところが続いて同じことをしても input にタイプした内容が表示されず、前回の値がそのまま表示されるのだ。

これだと、繰り返し利用することができない。頭が痛い～。

しかし、jQuery UI のデモサイトでは、同じようなことはおきていない。違うバージョンなどいろいろ試して見て、ようやくどうすればそうならずに利用できるか分かった。そのソースが次だ。

<html>
<head>
<title>Test Dialog</title>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
get_good_name = function() {
	$("#input_dialog").dialog(
	{
		modal: true,
		height: 100,
		width: 200,
		title: 'Input Dialog',
		resizable: false,
		buttons: {
			"OK": function() {
				alert($("#good_name").val());
				$(this).dialog('close');
			},
			"CANCEL": function() {
				$(this).dialog('close');
			},
		}
	});
}
</script>
</head>
<body>
<h1>UI Dialog Test</h1>
<input type="button" value="Good Open" onclick="get_good_name()" />

<div id="input_dialog" style="display:none">
	<div>
		<input type="text" id="good_name" val="" />
	</div>
</div>

</body>
</html>

見ての通り、違いは「<input type=”text” />」を予めHTMLソースに忍ばせておくか、JavaScriptで追加するかだ。今のところ動的に追加したtextタイプでは、入力された値は正常に取り出せないようだ。

ただし同じ動的なinputでもradioタイプでは、valueで指定した値をval()で正しく取得できた。

jQuery 1.4.2 jQuery UI 1.8.5

コメントを書く

吹き出しを表示するツールチップ

2010年 8月29日

ブログの記事や、自分の場合では Webアプリケーションなどで、その言葉やカラムが何を意味するのか説明を加えたいときがある。プログラムで一覧表など作っている場合は、特にそのID(数字)がどのテーブルデータにリンクしているのか、リンク先データの名前を示したい。が、画面サイズは限りがあるので、一覧表に何でもかんでも掲載できない。

そのような制約がある中で、マウスカーソルをその上に置くと吹き出しとなって表示する、ツールチップと呼ばれる機能が重宝する。情報量が多い場合は Ajax を利用する方法もあるが、そこまでする必要がない場合はツールチップが役に立つ。

で、何か気のきいた jQuery プラグインを利用してその紹介記事を、と思ったのだ。が、試しているうちにツールチップの表示は、どうやらブラウザがデフォルトでその機能を有しているのではないか？という事に思い当った。

と言うのも、HTML タグに title 属性を追加することで、div のようなブロックタグでも、span のようなインラインタグでもツールチップを表示するからである。これは、HTML では一般的なのだろうか？

お恥ずかしい事に、title 属性をあまり意識して使っていなかった。これからは是非利用させていただこう。

あなたのブラウザで、上の太字の「ツールチップ」にマウスカーソルを置いて説明文が表示されるか、試してみて下さい。

コメントを書く

月	火	水	木	金	土	日
« 1月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

jQuery 座標等取得メモ

ウィンドウのクライアント領域サイズの取得

マウスクリック、移動時のハンドラ内で取得するマウス位置

リンク画像のサイズ

jQuery で HTML5 FilesAPI ファイルオブジェクトのプロパティにアクセスするには

JavaScript のソース圧縮

jQuery UIダイアログで input から val() で値が取り出せない

吹き出しを表示するツールチップ

ABOUT

RECENT ENTRY

INTERNET TIPS

WORDPRESS

BLOG CATEGORY

BLOG CALENDAR

WordPress資料