Make KMZ

JSZIP、jQuery、HTML5のFile APIを使ってみました。
文章をdoc.txtというファイルにし、選択された画像をimage.pngというファイルにし、
この２つをアーカイブ（zip）してsample.zipというファイルで保存します。

doc.txt

image.png

sample.zip

【外部JavaScript】 js.zip

【外部StyleSheet】 css.zip

【イメージを読み込み用jQueryコード】

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="selfile" id="selfile" accept="image/*" capture="camera" />
    
    <div><img id="thumbnail" style="width:30%;height:30%;" src=""></div>
    <div style="display:none" class="imgorigholder hide"></div>
    <script>
        $("#selfile").change(function(){
          if (this.files.length > 0) {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            
            reader.onload = function() {
                $("#thumbnail").attr("src", reader.result );
                image_data = reader.result;
                
                var imgorigholder = $(".imgorigholder");
                var imgOrigUrl = image_data;
                var imgOrig = $("<img>");
                imgOrig.attr("src", imgOrigUrl);
                imgorigholder.empty();
                imgorigholder.append(imgOrig);
            }
          }
        });
    </script>
    
</form>

【文字データと画像をアーカイブするJSZIPコード】

var image_data;//これはjQueryで使用
    
function Save_zip(){
    var doc = document.getElementById("documents").value;//文章取得
    
    var zip = new JSZip();
    zip.file("image.png", $(".imgorigholder > img").attr("src").split('base64,')[1],{base64: true});
    zip.file("doc.txt", doc);
    zip.generateAsync({type:"blob"})
        .then(function(content) {
        saveAs(content, "sample.zip");
        alert("ダウンロード・フォルダーに保存しました");
    });
}

JavaScriptでテキストファイルとイメージファイルを圧縮（zip）して保存します