| Current File : /home/users/barii/public_html/finansenl.com.pl/system.fotomagnesy.pl/nowy-uploader.php |
<?php
session_start();
?><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.file-bar{
width: 100%;
padding: 3px;
margin-bottom: 10px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
border-radius: 3px;
box-sizing: border-box;
position: absolute;
left: 0px;
bottom: -13px;
}
body,html{overflow:hidden;font-family:Arial}
#files{
width: 100%;
cursor: pointer;
opacity: 0;
position: absolute;
top: 0;
left: 0px;
height: 100%;
}
.file-bar-fill{
height: 5px;
display: block;
background: cornflowerblue;
width: 0;
border-radius: 3px;
transition: width 0.8s ease;
}
.file-bar-fill-text{
color: #fff; display:none;
padding: 3px;
}
.box.has-advanced-upload {
outline: 2px dashed #92b0b3;
outline-offset: 0px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.box {
font-size: 1.25rem;
background-color: #fff;
position: relative;
height: 300px;
padding: 10px;
}
#select-file-btn, #file-upload-btn {
opacity: 0;}
.box__icon {
width: 100%;
height: 80px;
fill: #92b0b3;
display: block;
margin-bottom: 40px;
}
#koniec{color:#83929A;padding:50px 0px;}
label{font-size: 1.25rem;
background-color: #fff;
position: relative;}
</style>
</head>
<body>
<div style="padding:30px 10px;text-align:center">
<form action="action.php" class="box has-advanced-upload" method="post" enctype="multipart/form-data" id="multiple-upload-form">
<div id="koniec">
<svg class="ldi-lxcga5" style="display:none" width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><!--?xml version="1.0" encoding="utf-8"?--><!--Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)--><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="transform-origin: 50px 50px 0px;" xml:space="preserve"><g style="transform-origin: 50px 50px 0px;"><g style="transform-origin: 50px 50px 0px; transform: scale(0.6);"><g style="transform-origin: 50px 50px 0px;"><g><style type="text/css" class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -1s; animation-direction: normal;">.st0{fill:#F4E6C8;} .st1{opacity:0.8;fill:#849B87;} .st2{fill:#D65A62;} .st3{fill:#E15C64;} .st4{fill:#F47E5F;} .st5{fill:#F7B26A;} .st6{fill:#FEE8A2;} .st7{fill:#ACBD81;} .st8{fill:#F5E169;} .st9{fill:#F0AF6B;} .st10{fill:#EA7C60;} .st11{fill:#A8B980;} .st12{fill:#829985;} .st13{fill:#798AAE;} .st14{fill:#8672A7;} .st15{fill:#CC5960;} .st16{fill:#E17A5F;} .st17{fill:#849B87;} .st18{opacity:0.8;fill:#E15C64;} .st19{opacity:0.8;fill:#F7B26A;} .st20{fill:#79A5B5;} .st21{opacity:0.8;fill:#79A5B4;} .st22{fill:#666766;}</style><g style="transform-origin: 50px 50px 0px;"><g><g class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.928571s; animation-direction: normal;"><path class="st3" d="M50,92.5C26.6,92.5,7.5,73.4,7.5,50S26.6,7.5,50,7.5S92.5,26.6,92.5,50S73.4,92.5,50,92.5z M50,13.2 c-20.3,0-36.8,16.5-36.8,36.8S29.7,86.8,50,86.8S86.8,70.3,86.8,50S70.3,13.2,50,13.2z" fill="rgb(225, 92, 100)" style="fill: rgb(225, 92, 100);"></path></g></g></g><g style="transform-origin: 50px 50px 0px;"><g><g class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.857143s; animation-direction: normal;"><path class="st4" d="M65.7,26.4c0.5-0.9,0.2-2-0.7-2.5s-2-0.2-2.5,0.6l-15,24c0,0.1-0.1,0.1-0.1,0.2C47,49.4,47,50.3,47.3,51 c0.2,0.6,0.7,1.1,1.2,1.4c0.2,0.1,0.3,0.2,0.5,0.2c1.3,0.4,2.8-0.2,3.5-1.5L65.7,26.4z" fill="rgb(244, 126, 95)" style="fill: rgb(244, 126, 95);"></path></g></g></g><metadata xmlns:d="https://loading.io/stock/" class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.785714s; animation-direction: normal;">
<d:name class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.714286s; animation-direction: normal;">clock</d:name>
<d:tags class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.642857s; animation-direction: normal;">timer,time,countdown,hourglass,hour,minute,needle,circle,clock,spinner</d:tags>
<d:license class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.571429s; animation-direction: normal;">cc-by</d:license>
<d:slug class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.5s; animation-direction: normal;">lxcga5</d:slug>
</metadata></g></g></g></g><style type="text/css" class="ld ld-cycle" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: -0.428571s; animation-direction: normal;">@keyframes ld-cycle {
0%, 50%, 100% {
animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
}
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes ld-cycle {
0%, 50%, 100% {
animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
}
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.ld.ld-cycle {
-webkit-animation: ld-cycle 1s infinite linear;
animation: ld-cycle 1s infinite linear;
}
</style></svg></svg>
<div class="wgraj"><svg class="box__icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43"><path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"></path></svg><label for="file"><strong>Wybierz pliki</strong><span class="box__dragndrop"> lub upuść tutaj</span>.</label></div>
</div>
<input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById('files').click(); return false;" />
<input type="submit" id="file-upload-btn" name="file_upload_btn" value="Upload">
<input type="file" id="files" name="files[]" multiple="" accept=".jpg, .jpeg, .png" style="/*visibility: hidden;*/">
<br><br>
<div class="file-bar">
<span class="file-bar-fill" id="file-bar-fill-id"><span class="file-bar-fill-text" id="file-bar-fill-text-id"></span></span>
</div>
<script type="text/javascript">
var app = app || {};
(function(o){
"use strict";
var ajax, getFormData, setProgress;
ajax = function(data){
var xmlhttp = new XMLHttpRequest(), uploaded;
xmlhttp.addEventListener('readystatechange', function(){
if(this.readyState==4){
if(this.status==200){
uploaded = JSON.parse(this.response);
if(typeof o.options.finished==='function'){
o.options.finished(uploaded);
}
} else {
if(typeof o.options.error === 'function'){
o.options.error();
}
}
}
});
xmlhttp.upload.addEventListener("progress", function(event){
$('.ldi-lxcga5').show();
$('.wgraj').hide();
var percent;
if(event.lengthComputable===true){
percent = Math.round((event.loaded / event.total) * 100);
setProgress(percent);
}
});
if(o.options.progressBar!==undefined){
o.options.progressBar.style.width=0;
}
if(o.options.progressText!==undefined){
o.options.progressText.innerText=0;
}
xmlhttp.open("post", o.options.processor);
xmlhttp.send(data);
};
getFormData = function(source){
var data = new FormData(), i;
if(source.length<=0)
{
return false;
}
else
{
for(i=0;i<source.length; i++){
data.append('files[]', source[i]);
}
return data;
}
};
setProgress = function(value){
if(o.options.progressBar!==undefined){
o.options.progressBar.style.width = value? value+"%":0;
}
if(o.options.progressText!==undefined){
o.options.progressText.innerText=value?value+"%":0;
}
};
o.uploader = function(options){
o.options = options;
if(o.options.files !== undefined){
var imageFormDataValue = getFormData(o.options.files.files);
if(imageFormDataValue===false)
{
alert("No Files Selected");
document.getElementById("file-upload-btn").disabled = false;
document.getElementById("select-file-btn").disabled = false;
}
else
{
ajax(imageFormDataValue);
}
}
};
}(app));
document.getElementById("files").addEventListener("change", function(e){
e.preventDefault();
document.getElementById("file-upload-btn").setAttribute("disabled", "true");
document.getElementById("select-file-btn").setAttribute("disabled", "true");
var f = document.getElementById('files'),
pb = document.getElementById('file-bar-fill-id'),
pt = document.getElementById('file-bar-fill-text-id');
app.uploader({
files: f,
progressBar: pb,
progressText: pt,
processor: "action.php",
finished: function(data){
document.getElementById("file-upload-btn").disabled = false;
document.getElementById("select-file-btn").disabled = false;
if(data.status===true){
$('#koniec').html(data.data);
setTimeout(function() {
window.parent.pobierzwgranezdjecia();
$('.uploadzdjecie', window.parent.document).hide();
$('.overlay', window.parent.document).hide();
$('.zamknijpopupzdjecia', window.parent.document).remove();
$('.popupzdjecia', window.parent.document).remove();
}, 1000);
}
},
error: function(){
alert("Error occured. Try Again after page reload.");
}
});
});
</script>
</form>
</div>
<pre>
<?php
//print_r($_SESSION['zdjecia']);
?></pre>
</body>
</html>