ということで、JavaScriptでファイルのアップロード・ダウンロードを実装する方法をまとめる。
ファイルのアップロード・ダウンロードを実装する
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ファイルのアップロードとダウンロード</title>
</head>
<body>
<div>
<button id="upload">upload</button>
<span id="download"></span>
</div>
<div>
<input type="file" id="upload-file" />
<textarea id="upload-text" readonly></textarea>
</div>
<script src="index.js"></script>
</body>
</html>var upload = document.getElementById('upload');
// uploadボタンを使わずファイル選択したらすぐuploadしたい場合は、changeを使う
// uploadFile.addEventListener('change', function() {
// uploadボタンをクリックでアップロード処理をし、ダウンロード用リンクを作成する
upload.addEventListener('click', function () {
var uploadFile = document.getElementById('upload-file');
var file = uploadFile.files[0];
if (!file) alert('ファイルを選択してください。');
/********************************
* upload処理
********************************/
var uploadData;
var uploadText = document.getElementById('upload-text');
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
// そのまま表示
uploadText.innerHTML = reader.result;
// JSONに変換
uploadData = JSON.parse(reader.result);
}
/********************************
* download用リンクの作成
********************************/
//reader.onloadが非同期処理なので、ちょっとだけ遅延させる
setTimeout(function () {
var downloadFile = JSON.stringify(uploadData);
var a = document.createElement('a');
a.textContent = 'download';
a.download = 'file.json';
a.href = URL.createObjectURL(new Blob([downloadFile], {type: 'text.plain'}));
a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
var downloadLink = document.getElementById('download');
downloadLink.appendChild(a);
}, 1000);
});JavaScriptの15行目～25行目までがアップロード処理。
「ファイルを選択」ボタンをクリックしファイルを選択、それから「upload」ボタンでアップロードを開始する。
今回の場合は、JSONファイルを読み込んで、textareaに直接表示するパターンと、JSONに変換するパターンを例にしている。
※ ただし、JSON.parseは変換エラーになることがあるので、try-catchで囲んだほうが良いかもしれない。
32行目～40行目までがダウンロード用のリンク作成。
これについては、以前の記事で紹介しているので、そちらを参照してほしい。
やっていることは、ダウンロード用のリンクを作っているだけ。
追記: 2016/05/24 23:45
主要なブラウザに対応したダウンロード処理は下記を参照ください。
以上
written by @bc_rikko
0 件のコメント :
コメントを投稿