HTML5のドラッグ&ドロップによるファイル保存

HTML5ではドラッグ&ドロップでファイルをローカル環境にコピーすることができるようになりました。
既にネット上ではドラッグ&ドロップのサンプルをよく見かけるようになりましたが、固定ファイルのダウンロードのサンプルのみで、テキスト等を入力し、それをそのままテキストファイルとしてダウンロードするというサンプルが見当たらなかったので、自分で作成してみました。

動作確認はChromeのみで行っており、Chromeは起動オプション(–allow-file-access-from-files)を付与してあげないと、ローカル環境への書き込みを行ってくれない点に注意してください。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript">
			function onSaveTest()
			{
				var sampleTextareaObj	= document.getElementById("sampleTextarea");

				var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();

				bb.append(sampleTextareaObj.value);

				var blob = bb.getBlob();

				var blob_url = '';
				if (window.createObjectURL)
				{
					blob_url = window.createObjectURL(blob);
				}
				else if (window.createBlobURL)
				{
					blob_url = window.createBlobURL(blob);
				}
				else if (window.webkitURL.createObjectURL)
				{
					blob_url = window.webkitURL.createObjectURL(blob);
				}
				document.getElementById('hoge').innerHTML = '<a id="file_download" href="' + blob_url + '" target="_blank">file</a>';
				document.getElementById("file_download").addEventListener("dragstart", function (e) 
				{
					e.dataTransfer.setData("DownloadURL", "text/plain:test.txt:" + blob_url);
				}, false);
			}
		</script>
	</head>
	<body>
		<textarea id="sampleTextarea" style="width:400px;height:200px;"></textarea><br>
		<input type="button" value="保存" onclick="onSaveTest();"><br>
		<div id="hoge"></div>
	</body>
</html>

dragstartイベントの定義内で”test.txt”とファイル名を指定している部分を動的にしてあげることで、ダウンロードするファイルのファイル名も自由に設定できます。

これからはHTML5が主流になってくると思いますが、いまだにローカルPCとHTML間でのドラッグ&ドロップという操作に違和感が・・・

This entry was posted in プログラム. Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です