サンプル
応用例（GPXファイルを加工するウェブアプリ）
◆html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File API (Input)</title>
<script src="FileInput.js"></src>
<style>
#disp img {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
float: left;
}
</style>
</head>
<body>
<input type="file" id="files" multiple />
<div id="disp" ></div>
</body>
</html>
◆javascript(FileInput.js)
22-28行目：ファイルが画像の場合の処理（height=75pxの大きさで画像を表示）31-36行目：ファイルが画像以外の場合の処理（テキストを表示）
window.onload = function() {
if (window.File) {
// File APIに関する処理を記述
// window.alert("File APIが実装されてます。");
document.getElementById('files').addEventListener('change', handleFileSelect, false);
} else {
window.alert("本ブラウザではFile APIが使えません");
}
}
function handleFileSelect(event) {
var files = event.target.files; // FileList object
for(var i=0; i< files.length; i++) {
var f = files[i];
// FileReaderオブジェクトの生成
var reader = new FileReader();
// エラー発生時の処理
reader.onerror = function (evt) {
disp.innerHTML = "読み取り時にエラーが発生しました。";
}
if (f.type.match('image.*')) {
reader.onload = function (evt) {
var img = document.createElement('img');
img.src = evt.target.result;
disp.appendChild(img);
}
// readAsDataURLメソッドでファイルの内容を取得
reader.readAsDataURL(f);
} else {
// ファイル読取が完了した際に呼ばれる処理
reader.onload = function (evt) {
var content = reader.result.replace(/</g,'<')
disp.innerHTML = content;
}
// readAsTextメソッドでファイルの内容を取得
reader.readAsText(f, 'utf-8');
}
}
}
参考にしたページ
以上
