c3lf-system-3/templates/item.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>