Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Teste</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    <input type="file" id="filepicker" webkitdirectory multiple />
    <input type="button" id="upload" value="Enviar" disabled />
</body>

<script type="text/javascript">

    $("#filepicker").on("change", function (event) {

        var zip = new JSZip();

        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i].webkitRelativePath;
            zip.file(file, files[i]);
        }

        var zipper = zip.generateAsync({ type: "blob" });
        zipper.then(function (content) {
            $("#upload").attr("disabled", false);
            $("#upload").unbind("click");
            $("#upload").click(function () {
                var data = new FormData();
                data.append("name", "upload.zip");
                data.append("data", content);
                $.ajax({
                    type: "POST",
                    url: "/upload.php",
                    data: data,
                    processData: false,
                    contentType: content.type
                }).done(function (data) {
                    console.log("Uploaded");
                });
            });
            console.log(content);
        });

        zipper.catch(function (error) {
            alert(error);
        });

    });

</script>

</html>