JavaScript/HTMLおぼえがき
ファイルのアップロード、情報取得
ＣＳＶのアップロード 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ＣＳＶ表示</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="tx"></div>
<script>
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET","csv.csv", false); //ＣＳＶファイルのオープン
xmlHttp.send(null);
nl = String.fromCharCode(10); //改行コード
lines = xmlHttp.responseText.split(nl);//一行編集
edit = "<table border=1>";
for ( n = 0; n < lines.length; n++) { //すべての行数を編集するまで。
cols = lines[n].split(","); //列データに編集
edit += "<tr>";
for ( k = 0; k < cols.length; k++) { //すべての列数を編集するまで。
edit += "<td>" + cols[k] + "</td>";//セルデータのセット
}
edit += "</tr>"; //列データの終了
}
edit += "</table>"; //全データの終了
document.getElementById("tx").innerHTML = edit;//HTMLの書き込み
</script>
</body>
</html>
テキストファイルのアップロード 戻る
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Text Upload</title>
</head>
<body>
<form name="form">
<input type="file" id="file"><br>
<textarea name="out" rows="5" cols="30"></textarea>
</form>
<script>
fileInput = document.getElementById('file');
fileReader = new FileReader();
fileInput.onchange = function() {
file = fileInput.files[0];
fileReader.readAsText(file);
};
fileReader.onload = function () { form.out.value = fileReader.result ; }
</script>
</body>
</html>
テキストファイルのダウンロード 戻る
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Text Download</title>
</head>
<body>
<p><a href="#" onclick="dounload()">ダウンロード</a></p>
<script>
function dounload() {
blob = new Blob(['1234ABCD壱弐参'],{type:"text/plan"});//テキストファイルを作成（テキストのMIMEタイプ指定）
link = document.createElement('a');//HTMLのaタグを作成
link.href = URL.createObjectURL(blob);//作成したaタグのリンク先に、作成したテキストファイルを指定
link.download = 'ダウンロードファイル.txt';//ダウンロードファイル名を指定
link.click();//リンクをクリックしてすぐにダウンロード
}
</script>
</body>
</html>
ファイル情報の取得 戻る
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Text Upload</title>
</head>
<body>
<form name="form">
<input type="file" id="file"><br>
<textarea name="out" rows="7" cols="50"></textarea>
</form>
<script>
fileInput = document.getElementById('file');
fileReader = new FileReader();
fileInput.onchange = function() {
file = fileInput.files[0];
fileReader.readAsText(file);
};
fileReader.onload = function () {
form.out.value =
"ファイルデータの先頭：" + fileReader.result.substr(0,20) + "\n" +
"ファイル名：" + file.name + "\n" +
"ファイルの種別：" + file.type + "\n" +
"ファイルサイズ：" + file.size + "\n" +
"ファイルの最終更新日時：" + file.lastModifiedDate ;
}
</script>
</body>
</html>
画像情報の取得（EXIF) 戻る
写真用画像ファイルは撮影時の情報をExif(Exchangeable image file format)様式で保存されています。その詳細情報を取得します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>画像情報取得（EXIF)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<input id="input" type="file">
<div id="out"></div>
<!--exif-jsライブラリーを使います。-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.2.1/exif.min.js"></script>
<script>
document.getElementById("input").addEventListener("change", function(evt) {
EXIF.getData(evt.target.files[0], function() {
d = EXIF.getTag(this,"DateTime") ; //プロパティの項目名を指定して、必要な情報を取得する。
p = EXIF.pretty(this); //EXIF（プロパティ）詳細情報の取得
out.innerHTML = "<pre>作成日時：" + d + "<br>プロパティ：<br>" + p + "</pre>" ;
});
}, false);
</script>
</body>
</html>