2015/07/07

【JavaScript】ファイルのアップロード・ダウンロードを実装する

ChromeExtensions開発をしていて、履歴ファイルのアップロード・ダウンロード(インポート・エクスポート)を実装した。
ということで、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 件のコメント :

コメントを投稿