Your IP : 52.15.110.218
<?php
include "img-nahled-modal.php"
?>
<div class="alert alert-info h5 my-2 py-1 rounded-0" id="uploader-galerie-nazev"></div>
<div id="rowBtn">
<div class="upload-div d-flex flex-row wrap" >
<input type="file" id="fileInput" accept="image/jpg, image/jpeg, image/gif, image/png" hidden multiple>
<button name="btnUkazFotkyZGalerie" id="btnUkazFotkyZGalerie" class="btn btn-primary rounded-0 ml-2" onclick="ukazFotkyZGalerie()">Fotky v galerii</button>
<button name="btnGalerieShow" id="btnGalerieShow" class="btn btn-outline-primary rounded-0 ml-2" onclick="galerieShow()">Show</button>
<button name="btnUsporadejFotky" id="btnUsporadejFotky" class="btn btn-outline-primary rounded-0 ml-2" onclick="usporadejFotky()">Uspořádej fotky</button>
<button name="btnZIP" id="btnZIP" class="btn btn-outline-primary rounded-0 ml-2 mr-2" onclick="zazipuj()">ZIP ke stažení</button>
<button type="button" class="btn btn-outline-success rounded-0 ml-auto" id="virtualFile" name="virtualFile">Vyber nové</button>
<button id="btnUploadExecute" name="submit" id="submit" class="btn btn-warning rounded-0 ml-3 d-none" onclick="uploadExecute()">Nové na server</button>
</div>
</div>
<div id="progress" class="progress mt-2 d-none">
<div id="bar" class="progress-bar bg-info" role="progressbar" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div id="formaDetail" class="mt-2">
<?php include "uploader-img-edit.php"?>
</div>
<script>
{
let souboryProUpload = [],
souboryProAJAX = [],
souborIndex = 0,
uploadIndex = 0,
totalSize = 0,
uploadetSize = 0;
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
function text_truncate(str, length) {
if (length == null) {
length = 100;
}
ending = '...';
if (str.length > length) {
return str.substring(0, length - ending.length) + ending;
} else {
return str;
}
};
$('#virtualFile').on("click", function () { // toto vyvola event file select
$('#fileInput').click();
});
function odstranSoubor(id) {
$('#filRad' + id).remove();
souboryProUpload[id] = false;
}
$("#fileInput").change(function () {
$("#btnUploadExecute").removeClass("d-none");
$("#btnGalerieShow").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnUkazFotkyZGalerie").addClass("btn-outline-primary").removeClass("btn-primary");
$("#btnUsporadejFotky").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnZIP").removeClass("btn-primary").addClass("btn-outline-primary");
$("#virtualFile").removeClass("btn-outline-success").addClass("btn-success");
if (!$('#tabulkaNaPridani').length){
$('#formaDetail').html(
` <div id="tabulkaNaPridani" class="tabulka-overflow">
<table role="presentation" class="table table-striped my-2">
<tbody class="files" id="tblFiles">
</tbody>
</table>
</div>`
);
}
let vstup = document.getElementById("fileInput");
for (let i = 0; i < vstup.files.length; i++) {
let soubor = vstup.files[i],
velikost = formatBytes(soubor.size),
id = souborIndex++,
jmenoSouboru = text_truncate(soubor.name, 50),
htm = '';
soubor.id = id;
souboryProUpload.push(soubor);
htm += `
<tr id="filRad${id}">
<td class="tdUpload-img "><img id="img${id}" src="" alt="uploadovaný obrázek"
style="max-width: 100px; max-height: 70px; cursor: pointer;" onclick="imgNahled(${id})" >
</td>
<td class="tdUpload-name">
<div> ${jmenoSouboru} </div>
<div id="progress${id}" class="progress mt-2 d-none">
<div id="bar${id}" class="progress-bar bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div>
<div class="form-group row align-items-center mt-2 mb-0" id="altDiv${id}">
<label for="alternativ${id}" class="col-sm-2 col-form-label">Popis:</label>
<div class="col-sm-9">
<input type="text" class="form-control ml-2 rounded-0" name="alternativ${id}" id="alternativ${id}"
placeholder="alternativní text ... popis obrázku">
</div>
</div>
<div id="errFile${id}" class="d-none text-danger"></div>
</div>
</td>
<td class="text-right tdUpload-size" style="vertical-align: middle;">${velikost}</td>
<td id="filDel${id}" class="ikonaForm" style="vertical-align: middle;"><i class="far fa-trash-alt text-danger"
onclick="odstranSoubor(${id})"></td>
</tr>
`;
$("#tblFiles").prepend(htm);
$("#img" + id).fadeIn("fast").attr('src', URL.createObjectURL(soubor));
}
});
function uploadExecute() {
$("#btnUploadExecute").addClass('d-none');
$("#rowBtn").addClass("d-none");
totalSize = 0;
uploadetSize = 0;
$("#bar").width(0 + '%');
$("#bar").html(0 + '%');
for (let i = 0; i < souboryProUpload.length; i++) {
if (souboryProUpload[i]) {
souboryProAJAX.push(souboryProUpload[i]) ;
totalSize += souboryProUpload[i].size;
$("#filDel"+souboryProUpload[i].id).addClass('d-none');
}
}
$('[id^="altDiv"]').addClass('d-none');
$('[id^="progress"]').removeClass('d-none');
uploadIndex = 0;
kopirujNaServer(uploadIndex);
}
function kopirujNaServer(i) {
let fd = new FormData(),
ix = souboryProAJAX[i].id,
popis = $("#alternativ" + ix).val(),
galerieInfo = $("#galerieDetail").attr("dest-folder"),
info = galerieInfo.split('#')
byloLoaded = 0;
fd.append("popis", popis);
fd.append("poradi", ix + 1);
fd.append("folder", info[1]);
fd.append("galerie_id", info[0]);
fd.append("filesToUpload[]", souboryProAJAX[i]); //bylo souboryProUpload
$.ajax({
xhr: function () {
let xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
uploadetSize = uploadetSize - byloLoaded + evt.loaded;
byloLoaded = evt.loaded;
//console.log(uploadetSize);
let percentComplete = Math.floor((evt.loaded / evt.total) * 100),
percentCompleteTotal = Math.floor((uploadetSize / totalSize) * 100);;
$("#bar" + ix).width(percentComplete + '%');
$("#bar" + ix).html(percentComplete + '%');
$("#bar").width(percentCompleteTotal + '%');
$("#bar").html(percentCompleteTotal + '%');
}
}, false); // <i class="fas fa-file-export"></i>
return xhr;
},
type: 'POST',
url: 'www/uploader/uploader-img-upload.php',
cache: false,
contentType: false,
processData: false,
data: fd,
success: function (result) {
navrat = result.split('#');
if (navrat.length = 1) {
let id = navrat[0];
$("#filDel" + ix).html('<i class="fas fa-check fa-lg text-success"></i>');
$("#filDel" + ix).removeClass('d-none');
uploadIndex++;
if (uploadIndex < souboryProAJAX.length) {
$('#altDiv' + ix).addClass('d-none');
$('#progress' + ix).removeClass('d-none');
kopirujNaServer(uploadIndex);
} else {
$("#rowBtn").removeClass("d-none");
souboryProUpload = [];
souboryProAJAX = [];
souborIndex = 0;
$("#progress").addClass('d-none');
let destfolder = $("#galerieDetail").attr("dest-folder").split("#"),
galerie_id = destfolder[0];
$.ajax({
url: "www/uploader/uploader-galerie-pocet.php",
type: 'POST',
dataType: 'HTML',
data: {
'id': galerie_id,
},
success: function (result) {
console.log(result);
$("#galeriePocet" + galerie_id).html(result);
}
});
}
}
},
error: function (err) {
$("#filDel" + i).html('<i class="fas fa-times fa-lg text-danger"></i>');
$("#errFile" + i).html(err);
$("#errFile" + i).removeClass('d-none');
$("#filDel" + i).removeClass('d-none');
$("#progress").addClass('d-none');
},
});
}
function imgNahled(id){
$("#img-nahled").modal("show");
$("#imgNahledModal").fadeIn("fast").attr('src', URL.createObjectURL(souboryProUpload[id]));
$("#img-nahled-title").html(souboryProUpload[id].name);
}
function ukazFotkyZGalerie(){
$("#btnGalerieShow").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnUkazFotkyZGalerie").removeClass("btn-outline-primary").addClass("btn-primary");
$("#btnUsporadejFotky").removeClass("btn-primary").addClass("btn-outline-primary");
$("#virtualFile").removeClass("btn-success").addClass("btn-outline-success");
$("#btnZIP").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnUploadExecute").addClass("d-none");
let galerieInfo = $("#galerieDetail").attr("dest-folder"),
info = galerieInfo.split('#'),
galerie_id = info[0];
$.ajax({
url: "www/uploader/uploader-img-edit.php",
type: 'POST',
dataType: 'HTML',
data: {
'galerie_id': galerie_id,
},
success: function (result) {
$("#formaDetail").html(result);
$("#uploader-galerie-nazev").html($("#galerieNadpis" + galerie_id).html());
}
});
}
function usporadejFotky(){
$("#btnGalerieShow").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnUsporadejFotky").removeClass("btn-outline-primary").addClass("btn-primary");
$("#btnUkazFotkyZGalerie").addClass("btn-outline-primary").removeClass("btn-primary");
$("#virtualFile").removeClass("btn-success").addClass("btn-outline-success");
$("#btnZIP").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnUploadExecute").addClass("d-none");
let galerieInfo = $("#galerieDetail").attr("dest-folder"),
info = galerieInfo.split('#'),
galerie_id = info[0];
$.ajax({
url: "www/uploader/uploader-img-poskladat.php",
type: 'POST',
dataType: 'HTML',
data: {
'galerie_id': galerie_id,
},
success: function (result) {
$("#formaDetail").html(result);
$("#uploader-galerie-nazev").html($("#galerieNadpis" + galerie_id).html());
}
});
}
function galerieShow (){
$("#btnGalerieShow").removeClass("btn-outline-primary").addClass("btn-primary");
$("#btnUsporadejFotky").addClass("btn-outline-primary").removeClass("btn-primary");
$("#btnUkazFotkyZGalerie").addClass("btn-outline-primary").removeClass("btn-primary");
$("#virtualFile").removeClass("btn-success").addClass("btn-outline-success");
$("#btnZIP").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnUploadExecute").addClass("d-none");
let galerieInfo = $("#galerieDetail").attr("dest-folder"),
info = galerieInfo.split('#'),
galerie_id = info[0];
$.ajax({
url: "www/uploader/uploader-galerie-show.php",
type: 'POST',
dataType: 'HTML',
data: {
'id': galerie_id,
},
success: function (result) {
$("#formaDetail").html(result);
}
});
};
function zazipuj(){
$("#btnGalerieShow").removeClass("btn-primary").addClass("btn-outline-primary");
$("#btnUsporadejFotky").addClass("btn-outline-primary").removeClass("btn-primary");
$("#btnUkazFotkyZGalerie").addClass("btn-outline-primary").removeClass("btn-primary");
$("#virtualFile").removeClass("btn-success").addClass("btn-outline-success");
$("#btnZIP").removeClass("btn-outline-primary").addClass("btn-primary");
let galerieInfo = $("#galerieDetail").attr("dest-folder"),
info = galerieInfo.split('#'),
galerie_id = info[0];
$.ajax({
url: "www/uploader/uploader-galerie-zazipuj.php",
type: 'POST',
dataType: 'HTML',
data: {
'galerie_id': galerie_id,
},
success: function (result) {
$("#formaDetail").html(result);
}
});
}
}
</script>