読者です 読者をやめる 読者になる 読者になる

Akihiro's Programmer Blog

Technology Notes for Personal

JavaScriptのみでzipファイルを生成する -2

JavaScript HTML5

というわけで4日でバージョンアップ。



変更点

大きな変更点は3つ。

  1. folderメソッドを削除(ぇ
  2. deleteメソッドを追加
  3. ローカルファイルを追加できるように



バージョンアップなのに、機能が減るってのもあれだが・・・

ま、その分オリジナルっぽくなってきたし良いんじゃないかなと!

ということで

バージョンは2.0.0に。
相変わらず対応ブラウザはfirefoxchrome
ローカルファイルの読み込みはFILE APIを使用。

ライブラリ名 Zipper.js (ver 2.0.0)
対応ブラウザ forefox,chrome
機能 ファイルやフォルダを作って、まとめてzipでダウンロード


使い方

基本的な使い方はバージョン1.0.0と変わらない。
変更点だけご紹介。こんな風に使えるよってな感じで。



  • フォルダの追加はfileメソッドで
zipper.file("folderName/");  //最後に/(スラッシュ)でフォルダ指定


  • フォルダもファイルもまとめて追加
zipper.file("folderName/file1.txt", "file1 data");  


  • 正直削除機能は忘れてた
zipper.delete("file1.txt");    //ファイルも
zipper.delete("folderName/");  //フォルダも削除





そしてローカルファイルは

  • inputタグや
<input type="file" name="file[]" id="input" multiple>

document.getElementById("input").addEventListener("change",
    function(event){
        var files = document.getElementById("input").files;
    }
}, true);


  • ドラッグ&ドロップでFileListを取ってきて
window.addEventListener('dragover', function(event){
    event.preventDefault();  //dragoverのデフォルト動作をキャンセル
}, false);

window.addEventListener('drop', function(event){
    event.preventDefault();  //dropのデフォルト動作をキャンセル
    var files = event.dataTransfer.files;
}, false);


  • 後はfileメソッドにポイ
zipper.file(files);



こちらに置いておきます。ご自由にお取りください。
(追記 2014/04/10)現在公開しておりません。

最後に

結構オリジナリティな部分が増えた。

でもまだパクリ80%だから何ともかんとも。

ローカルファイルを非同期に読み込んでいる関係で動作を安定させるのにとても苦労した。(そのせいでfolderメソッドが消滅したわけ)

今のところtxtとかjs,htmlなんかの単純なファイルしか扱えないけど、将来的には色んなファイルに対応させたいと思ってる。

次のバージョンアップは何時になるやら。