window.URL.revokeObjectURL(this.pic.src);

Class Load
      crop()
             load_pic2()
                     upload()

/* global zip */

//https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

document.addEventListener("DOMContentLoaded", function () {

    let loa;
    let message = '';

    document.querySelectorAll('script').forEach(function (item) {
        const regex = /(.*\/)(jszip\.min\.js)/gm;
        let m;
        if ((m = regex.exec(item.src)) !== null) {
            zip.workerScriptsPath = m[1]; // путь до папки слибой zip
            zip.useWebWorkers = true;
            return;
        }
    });
    document.querySelector('#file').addEventListener('change', function () {

        loa = new load(
                document.querySelector('#full').value, // размер просмотрового фото
                document.querySelector('#pre').value, // размер превь фото
                this,
                document.querySelector('#current_files_'), // див вывода текущего обрабатываемого файла
                document.querySelector('#process_time_'), // див для вывода времени процесса
                document.querySelector('#progress_load')  // прогрессс загрузки
                );
    });

    document.querySelector('#load_start').addEventListener('click', function () {

        zip.createReader(new zip.BlobReader(document.querySelector('#file').files[0]), function (zipReader) {
// get all entries from the zip
            zipReader.getEntries(function (entries) {
                entries.forEach(function (entry) {
                    loa.map.push(entry);
                });
                console.table(loa.map);
                if (document.querySelector('#del').checked) {
                    loa.del_previous();
                }
                loa.getFilen(); //запуск на обработку
            });
        });
    });


    class load {
        constructor(
                st_full_height,
                st_preview_height,
                input_zip_files,
                current_files,
                process_time,
                progress_load
                ) {

//            this.pic;

            this.func_servlet = "func"; // для обработки команд
            this.upload_servlet = "upload"; // для обработки команд


            this.input_zip_files = input_zip_files;
            this.st_full_height = st_full_height;
            this.st_full_width = st_full_height;
            this.st_preview_height = st_preview_height;
            this.st_preview_width = st_preview_height;
            this.pics = {
                full_height: this.st_full_height,
                full_width: this.st_full_width,
                preview_height: this.st_preview_height,
                preview_width: this.st_preview_width
            };
            this.matrix = new Array(6);
            this.current_img = {
                top: 0,
                left: 0,
                x: 0,
                y: 0,
                height: 0,
                width: 0
            };
            this.new_img = {
                top: 0,
                left: 0,
                x: 0,
                y: 0,
                height: 0,
                width: 0
            };
            this.img = {height: 0,
                width: 0,
                rotate: 0,
                scale: 1
            };
            this.id_crop = ['preview', 'full'];
            this.crop = {
                id: this.id_crop[1]
            };
            this.cropImg = 0;
            this.deg_to_rad = Math.PI / 180;
            this.rad_to_deg = 180 / Math.PI;
            this.map = [];
            this.filename;
            this.current_files = current_files;
            this.progress_load = progress_load;
            this.process_time = process_time;
            this.time_start;
            this.canvas1 = document.createElement("canvas");
            this.context = this.canvas1.getContext("2d");
            this.getFilen = this.getFiles_();
        }

        del_previous() {
            let formData = new FormData();
            formData.append('comand', 'del_previous');
            let xhr = new XMLHttpRequest();
            xhr.open('POST', this.func_servlet, true);
            xhr.onload = function (e) {
                if (xhr.status !== 200) { // анализируем HTTP-статус ответа, если статус не 200, то произошла ошибка
//                    alert(`Ошибка ${xhr.status}: ${xhr.statusText}`); // Например, 404: Not Found
                    message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
                }
            };
            xhr.onerror = function () {
                message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
            };
            xhr.send(formData);
        }

        getFiles_() {
            let mm = 0;
            var urlFactory = window.URL || window.webkitURL;
            this.time_start = performance.now();
            return function () {
//
//                if (this.delprevious.checked) {
//                    this.del_previous();
//                }

                this.progress_load.setAttribute('max', this.map.length);
                if (this.map.length === mm || message.length !== 0) {
                    if (message.length !== 0) {
                        alert(message);
                    }
                    message = '';
                    console.log("закончено");
                    this.current_files.innerHTML = '';
                    this.process_time.innerHTML = '';
                    this.map.splice(0, this.map.length);
                    mm = 0;
                    this.input_zip_files.value = '';
                    this.progress_load.value = 0;
                    return 0;
                } else {
                    getPic.call(this);

                    let t = performance.now() - this.time_start;
                    let m = t * this.map.length / mm - t;
                    this.process_time.innerHTML = 'прошло  ' +
                            new Intl.NumberFormat('ru-RU', {maximumFractionDigits: 2}).format(t / 1000) +
                            '<br> осталось ' +
                            new Intl.NumberFormat('ru-RU', {maximumFractionDigits: 2}).format(m / 1000);
                    return mm;
                }
            };


            function getPic() {
                this.map[mm].getData(new zip.BlobWriter("image/jpeg"),
                        function (fileBlob) {
//                            "use strict";
                            this.progress_load.value = mm + 1;
                            this.current_files.innerHTML = (mm + 1) + '  из  ' + this.map.length + ' >>  ' + this.map[mm].filename;
                            this.filename = this.map[mm].filename;
                            try {
                                window.URL.revokeObjectURL(this.pic.src);
                            } catch (e) {
                            }
//                            delete this.pic;
                            
                            this.pic = new Image();
                            this.pic.onload = function (p) {
                                this.img.height = p.target.height;
                                this.img.width = p.target.width;
                                if (p.target.height > p.target.width) {
                                    this.img.scale = this.st_full_height / p.target.height;
                                    this.pics.full_height = this.st_full_height;
                                    this.pics.full_width = p.target.width * this.img.scale;
                                    this.pics.preview_height = this.st_preview_height;
                                    this.pics.preview_width = p.target.width * this.st_preview_height / p.target.height;
                                }

                                if (p.target.height < p.target.width) {
                                    this.img.scale = this.st_full_width / p.target.width;
                                    this.pics.full_width = this.st_full_width;
                                    this.pics.full_height = p.target.height * this.img.scale;
                                    this.pics.preview_width = this.st_preview_width;
                                    this.pics.preview_height = p.target.height * this.st_preview_width / p.target.width;
                                }


                                if (p.target.height === p.target.width) {
                                    this.img.scale = this.st_full_width / p.target.width;
                                    this.pics.full_height = this.st_full_height;
                                    this.pics.full_width = this.st_full_width;
                                    this.pics.preview_height = this.st_preview_height;
                                    this.pics.preview_width = this.st_preview_width;
                                }


                                var h = this.img.height * this.img.scale;
                                var w = this.img.width * this.img.scale;
                                this.new_img.height = this.current_img.height = h;
                                this.new_img.width = this.current_img.width = w;
                                this.new_img.top = this.current_img.top = 0;
                                this.new_img.left = this.current_img.left = 0;
                                this.new_img.x = this.current_img.x = this.pics.full_width / 2;
                                this.new_img.y = this.current_img.y = this.pics.full_height / 2;
                                this.img.rotate = 0;
                                this.cropp.call(this);
                            }.bind(this);
                            this.pic.src = urlFactory.createObjectURL(fileBlob, {type: "image/jpeg"});
                            mm++;
                        }.bind(this),
                        function (current, total) {
//                    console.log(current, total);
                        }
                );
            }
        }

        cropp() {

            var crop_width = this.cropImg === 0 ? this.pics.full_width : this.pics.preview_width;
            var crop_height = this.cropImg === 0 ? this.pics.full_height : this.pics.preview_height;
            var sq = Math.sqrt(crop_width * crop_width + crop_height * crop_height);
            var x = Math.floor((this.new_img.x - sq / 2) / this.img.scale);
            var y = Math.floor((this.new_img.y - sq / 2) / this.img.scale);
            var w = Math.floor(sq / this.img.scale);
            var h = Math.floor(sq / this.img.scale);
            this.canvas1.height = h;
            this.canvas1.width = w;
            this.context.fillStyle = '#ffffff';
            this.context.fillRect(0, 0, w, h);
            this.context.drawImage(this.pic, x, y, w, h, 0, 0, w, h);

            var pic = new Image();
            pic.onload = function () {
                this.canvas1.height = sq;
                this.canvas1.width = sq;
                this.context.translate(sq / 2, sq / 2);
                this.context.rotate((this.img.rotate * Math.PI) / 180);
                this.context.drawImage(pic, -sq / 2, -sq / 2);
                pic.onload = load_pic2.call(this);
                pic.src = this.canvas1.toDataURL("image/jpeg", 1.0);
            }.bind(this);
            if (this.img.scale < 1) {
                pic.src = this.resize(this.canvas1, sq, sq);
            } else {
                pic.src = this.resize_(this.canvas1, sq, sq);

            }

            function load_pic2() {
                this.canvas1.height = crop_height;
                this.canvas1.width = crop_width;
                var x = (sq - crop_width) / 2;
                var y = (sq - crop_height) / 2;
                this.context.drawImage(pic, x, y, crop_width, crop_height, 0, 0, crop_width, crop_height);
                this.canvas1.toBlob(this.upload.bind(this), "image/jpeg", 1);

            }

        }

        upload(blobOrFile) {
            var formData = new FormData();
            formData.append("userfile", blobOrFile, this.filename);
            formData.append('full_preview', this.cropImg);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', this.upload_servlet, true);
            xhr.onload = function (e) {
                if (xhr.status !== 200) { // анализируем HTTP-статус ответа, если статус не 200, то произошла ошибка
                    alert(`Ошибка ${xhr.status}: ${xhr.statusText}`); // Например, 404: Not Found
                } else { // если всё прошло гладко, выводим результат
//                    setTimeout(function () {
//                        message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
//                    }, 500);
//                            console.log(xhr.response); // response -- это ответ сервера
                }
            };
            xhr.upload.onprogress = function (e) {
//                        console.log(e);
//                    if (e.lengthComputable) {
//                        progressBar.value = (e.loaded / e.total) * 100;
//                        progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
//                        throw 11
//                    }
            };
            xhr.onerror = function () {
                message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
//                        alert("Загрузка " + this.filename + " не удалась");
            };
            xhr.send(formData);
            this.cropImg = this.crop.id === this.id_crop[1] ? (this.cropImg | 2) : (this.cropImg | 1);
            this.full_pre();
            if (this.cropImg === 2) {
                this.cropp();
            }
        }

        resize(img, w, h) {//уменьшение
            var steps = Math.ceil(Math.log(img.height / h) / Math.LN2);
            var sW = w * Math.pow(2, steps - 1);
            var sH = h * Math.pow(2, steps - 1);
            var canvas2;
            while (steps--)
            {
                canvas2 = document.createElement('canvas');
                canvas2.width = sW;
                canvas2.height = sH;
                canvas2.getContext('2d').drawImage(img, 0, 0, sW, sH);
                img = canvas2;
                sW = Math.round(sW / 2);
                sH = Math.round(sH / 2);
            }
            return canvas2.toDataURL("image/jpeg", 1);
        }

        resize_(img, w, h) {//увеличение
            var steps = Math.ceil(Math.log(h / img.height) / Math.LN2);
            var sW = w * Math.pow(2, steps - 1);
            var sH = h * Math.pow(2, steps - 1);
            var canvas2;
            while (steps--)
            {
                canvas2 = document.createElement('canvas');
                canvas2.width = sW;
                canvas2.height = sH;
                canvas2.getContext('2d').drawImage(img, 0, 0, sW, sH);
                img = canvas2;
                sW = Math.round(sW * 2);
                sH = Math.round(sH * 2);
            }
            return canvas2.toDataURL("image/jpeg", 1);
        }

        full_pre() {
            if (this.crop.id === 'preview')
            {
//            -- включение режима full --
                this.crop.id = this.id_crop[1];
                this.img.scale *= this.pics.full_width / this.pics.preview_width;
                this.setres();
                this.cropImg = 0;
                this.getFilen();
            } else {
//            -- включение режима preview --
                this.crop.id = this.id_crop[0];
                this.img.scale *= this.pics.preview_width / this.pics.full_width;
                this.setres();
            }
        }
        setres() {
            const new_h = this.img.height * this.img.scale;
            this.new_img.x = this.new_img.x * new_h / this.new_img.height;
            this.new_img.height = new_h;
            const new_w = this.img.width * this.img.scale;
            this.new_img.y = this.new_img.y * new_w / this.new_img.width;
            this.new_img.width = new_w;
            this.current_img.x = this.new_img.x;
            this.current_img.y = this.new_img.y;
            const ang = -1 * this.img.rotate * this.deg_to_rad;
            this.matrix[0] = Math.cos(ang);
            this.matrix[1] = -Math.sin(ang);
            this.matrix[2] = Math.sin(ang);
            this.matrix[3] = Math.cos(ang);
            this.matrix[4] = 0;
            this.matrix[5] = 0;
        }
    }



});

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/poi-css.css">
<script src="js/vendor/jquery.min.js"  type="text/javascript"></script>
<script src="js/zip/jszip.min.js" type="text/javascript"></script>
<script src="js/zip/zip.js" type="text/javascript"></script>
<script src="js/zip/zip-ext.js" type="text/javascript"></script>
<script src="js/upload/loadphoto.js" type="text/javascript"></script>

<title>Загрузка на сервер</title>
</head>

   	<body>
        <div id="view">
			<label>Имя папки для загрузки на сервере (логин) <input type="text" id="dir-login-name" value="lena" style="width: 50px; height: 12px; text-align: center;"></label><br>
            <label>Размер просмотровый (px) <input type="text" id="full" value="1200" style="width: 50px; height: 12px; text-align: center;"></label><br>
            <label>Размер превью (px)       <input type="text" id="pre" value="75"  style="width: 50px; height: 12px; text-align: center;"></label><br>
            <input type="file" id="file" accept="application/zip" ><br>
            <input type="button" id="load_start" value=" Начать загрузку " style="margin: 13px 0 10px;width: 198px;"><br>
            <label>Загрузка<progress id="progress_load" max="100" value="0"></progress></label>
            Паттерн допустимых символов: /^[()!._a-zA-Z0-9\s]+$/
            <div id="current_files_"></div>
            <div id="process_time_"></div>
			<input type="button" id=del_dir_server" value=" УДАЛЕНИЕ ПАПКИ НА СЕРВЕРЕ !!! " onclick="delDirServer();return false;" style="margin: 13px 0 10px;width: 198px;"><br>
        </div>
</body>
</html>