19.09.2017, 09:17
File upload example.
index.lp
upload.lp
index.lp
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Upload example</title>
<link rel="stylesheet" href="/apps/css/bootstrap.css">
<link rel="stylesheet" href="/apps/css/font-awesome.css">
<link rel="stylesheet" href="/apps/css/style.css">
<script src="/apps/js/jquery.js.gz"></script>
<style>
body { padding: 20px; background-color: #fff; }
.navbar { background-color: #eee; }
.container {
width: 100%;
max-width: 680px;
text-align: center;
margin: 0 auto;
}
.box {
font-size: 2rem;
background-color: #c8dadf;
position: relative;
padding: 100px 20px;
outline: 2px dashed #92b0b3;
outline-offset: -10px;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.box.is-dragover {
outline-offset: -20px;
outline-color: #c8dadf;
background-color: #fff;
}
.box__dragndrop, .box__icon {
display: none;
}
.box .box__dragndrop {
display: inline;
}
.box .box__icon {
width: 100%;
height: 80px;
fill: #92b0b3;
display: block;
margin-bottom: 40px;
}
.box.is-uploading .box__input,
.box.is-success .box__input {
visibility: hidden;
}
.box__uploading,
.box__success {
display: none;
}
.box.is-uploading .box__uploading,
.box.is-success .box__success {
display: block;
position: absolute;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%);
}
.box__uploading {
font-style: italic;
}
.box__success {
animation: appear-from-inside .25s ease-in-out;
}
@keyframes appear-from-inside {
from { transform: translateY(-50%) scale(0); }
75% { transform: translateY(-50%) scale(1.1); }
to { transform: translateY(-50%) scale(1); }
}
.box__restart {
cursor: pointer;
text-decoration: underline;
}
.box__restart:focus,
.box__restart:hover {
color: #39bfd3;
}
.box__file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.box__file + label {
max-width: 80%;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.box__file + label:hover strong,
.box__file:focus + label strong {
color: #39bfd3;
}
.box__file:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
label {
font-weight: normal;
}
</style>
</head>
<body>
<div class="ios-title-bar"></div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid text-center">
<span class="btn btn-default navbar-btn pull-right back"><span class="fa fa-lg fa-times"></span></span>
<span class="navbar-brand">Upload example</span>
</div>
</div>
<div class="wrap">
<div class="container">
<form method="post" action="upload.lp" enctype="multipart/form-data" novalidate="" class="box">
<div class="box__input">
<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>
<input name="file" id="file" class="box__file" type="file">
<label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span></label>
</div>
<div class="box__uploading">Uploading…</div>
<div class="box__success">Done! <span class="box__restart" role="button">Upload more?</span></div>
</form>
</div>
</div>
<script>
(function(document, window) {
var form = document.querySelector('.box'),
input = form.querySelector('input[type="file"]'),
label = form.querySelector('label'),
restart = form.querySelector('.box__restart'),
droppedFiles = false;
input.addEventListener('change', function(e) {
droppedFiles = false;
if (e.target.files) {
label.textContent = e.target.files[0].name;
}
doSubmit();
});
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function(event) {
form.addEventListener(event, function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
});
['dragover', 'dragenter'].forEach(function(event) {
form.addEventListener(event, function() {
form.classList.add('is-dragover');
});
});
['dragleave', 'dragend', 'drop'].forEach(function(event) {
form.addEventListener(event, function() {
form.classList.remove('is-dragover');
});
});
form.addEventListener('drop', function(e) {
form.classList.remove('is-success')
droppedFiles = e.dataTransfer.files;
if (droppedFiles) {
label.textContent = droppedFiles[0].name;
}
doSubmit();
});
function doSubmit() {
var data, xhr;
if (form.classList.contains('is-uploading')) {
return false;
}
form.classList.add('is-uploading');
data = new FormData(form);
if (droppedFiles) {
Array.prototype.forEach.call(droppedFiles, function(file) {
data.append(input.getAttribute('name'), file);
});
}
xhr = new XMLHttpRequest();
xhr.open(form.getAttribute('method'), form.getAttribute('action'), true);
xhr.onload = function() {
form.classList.remove('is-uploading');
if (xhr.status >= 200 && xhr.status < 400) {
form.classList.add('is-success');
}
else {
alert('Server error');
}
};
xhr.onerror = function() {
form.classList.remove('is-uploading');
alert('Upload error');
};
xhr.send(data);
};
restart.addEventListener('click', function() {
window.location.reload();
});
// emulate status bar due to iOS bug
var ios = navigator.userAgent.match(/ip(?:ad|od|hone).*OS (\d)/i);
$('html').toggleClass('ios-fs', !!(ios && navigator.standalone && !window.frameElement));
// back button
$('.back').click(function() {
$(this).find('.fa')
.removeClass('fa-arrow-left')
.addClass('fa-refresh')
.addClass('fa-spin');
window.location = '/apps/';
});
})(document, window);
</script>
</body>
</html>upload.lp
Code:
<?
upload()
filedata = getvar('file')
filename = getvar('file_filename')
if type(filedata) == 'string' and #filedata > 0 then
...
end