Datenupload innerhalb der Bestellung

{include file="data/inc.file-upload-templates.htm"}


<form action="/uploadcheck.htm" name="uploadform" id="fileupload" enctype="multipart/form-data" method="post">
                {* BROWSER UPLOAD #####################################################################################*}
                {if $aArtikel.datentransfer_upload}


                <section id="upload_browser" class="upload_option cf">
                    <h3>{$lang.browser_upload_text} - {$smarty.get.bez}</h3>
                    <hr/>
                    <fieldset class="upload_field">
                        <input name="files[]" type="file" multiple/>

                        <button class="btn upload" type="button" data-post="upload" data-amount="1">Datei hochladen
                        </button>
                        <div class="clr"></div>
                        <progress class="progressBar" value="0" max="100"></progress>
                    </fieldset>
                </section>


                <!-- The table listing the files available for upload/download -->
                <div role="presentation" class="table table-striped files"></div>
{/if}
                <a href="/upload.htm?checkData=1" id="to_upload_check" class="btn success continue hidden">weiter</a>

</form>


<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="script/jquery.ui.widget.js"></script>

{*<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>*}
<!--
  <script src="_ressources/javascript/jquery.ui.widget.js"></script>
-->
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- blueimp Gallery script -->
<!-- <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> -->

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="script/fileupload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="script/fileupload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="script/fileupload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="script/fileupload/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="script/fileupload/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="script/fileupload/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="script/fileupload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="script/fileupload/jquery.fileupload-ui.js"></script>

<script>
    var accept_file_types = {$uploadOptions.accept_file_types};
    var max_file_size = {$uploadOptions.max_file_size};
    {literal}
    var size = 0;

    $(document).ready(function () {
        'use strict';

        var uploadFiles = new Array();
        var numOfUploadedFiles = 0;

        $('#fileupload').fileupload({
        //  dataType: 'json',
        {/literal}
        url: '{$uploadOptions.script_url}',
        {literal}
        autoUpload: false,
                prependFiles: true,
                acceptFileTypes: accept_file_types,
                maxFileSize: max_file_size,
                messages: {
            maxNumberOfFiles: 'Maximal Anzahl erlaubter Dateien erreicht',
                    acceptFileTypes: 'Dateityp nicht erlaubt',
                    maxFileSize: 'Datei ist zu groß',
                    minFileSize: 'File is too small'
        }

    }).on('fileuploadadd', function (index, file) {
            // console.log('Added file: ' + file.name);
            $('#fileupload .progressBar').val(0);

            uploadFiles.push(file);

        }).on('fileuploadprogress', function (e, data) {
            var progress = Math.floor(data.loaded / data.total * 100);
            $('#fileupload .progressBar').val(progress);

        }).on('fileuploaddone', function (e, data) {
            if (data.result.files[0].error == undefined) {
                numOfUploadedFiles++;
                $('#to_upload_check').removeClass('hidden');
            }
            $('#fileupload .hint').remove();
            //            $('#fileupload .progressBar').val(100);

            var index = uploadFiles.indexOf(data);
            if (index != undefined) {
                uploadFiles.splice(index, 1);
            }
        }).on('fileuploaddestroy', function (e, data) {
            data.context.remove();

        }).on('fileuploaddestroyed', function (e, data) {
            numOfUploadedFiles--;
            if (numOfUploadedFiles == 0) {
                $('#to_upload_check').addClass('hidden');
            }

            $.ajax({
                // Uncomment the following to send cross-domain cookies:
                //xhrFields: {withCredentials: true},
                url: $('#fileupload').fileupload('option', 'url'),
                data: {m: 'list'},
                dataType: 'json'
            }).done(function (result) {

            });

        }).addClass('fileupload-processing');

        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            data: {m: 'list'},
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            //            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            numOfUploadedFiles = result.files.length;
            if (numOfUploadedFiles > 0) {
                $('#to_upload_check').removeClass('hidden');
            } else {
                $('#to_upload_check').addClass('hidden');
            }

            $(this).fileupload('option', 'done')
                    .call(this, $.Event('done'), {result: result});
        });


        $('.btn.upload').click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            for (var i = 0; i < uploadFiles.length; i++) {
                uploadFiles[i].submit();
            }
        });

    });
</script>