c3lf-system-3/templates/item.php
2019-02-22 13:40:23 +01:00

149 lines
No EOL
4.5 KiB
PHP

<?php
/**
* Created by PhpStorm.
* User: jedi
* Date: 12/27/18
* Time: 4:46 AM
*/
?>
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
#img-upload{
width: 100%;
}
</style>
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item">Lost</li>
<li class="breadcrumb-item active">Add</li>
</ol>
<div id="alertmessage" class="collapse alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div id="successmessage" class="collapse alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<!-- Area Chart Example-->
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-plus"></i>
Insert Item into DB
</div>
<div class="card-body">
<form method="POST" action="/action.php?action=lost" id="lost_form">
<p><input type="text" class="form-control" placeholder="WANN" name="wann" value="<?php echo date("Y-m-d H:i:s");?>"></p>
<p><input type="file" accept="image/*;capture=camera"></p>
<p><input type="file" name="image" accept="image/*" capture="environment"></p>
<p><input type="text" class="form-control" placeholder="KONTAKT" name="contact" autocomplete="off"></p>
<p><button type="submit" class="form-control" onclick="testajax(); return false;">Submit</button></p>
<div class="form-group">
<img id='img-upload'/>
<div class="input-group">
<div class="custom-file btn-file">
<input type="file" class="custom-file-input" id="inputGroupImage" name="image" accept="image/*" capture="environment">
<label class="custom-file-label" for="inputGroupImage">Choose file</label>
<input type="text" class="form-control" readonly>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
</div>
<!-- /.container-fluid -->
<!-- Bootstrap core JavaScript-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="/vendor/chart.js/Chart.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="/js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="/js/demo/chart-area-demo.js"></script>
<script src="/js/demo/chart-bar-demo.js"></script>
<script src="/js/demo/chart-pie-demo.js"></script>
<script>
$(document).ready( function() {
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
$('.btn-file :file').on('fileselect', function(event, label) {
var input = $(this).parents('.input-group').find(':text'),
log = label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img-upload').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputGroupImage").change(function(){
readURL(this);
});
});
</script>