Datenupload

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="script/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>


<!-- 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();

        $('#fileupload').fileupload({

            url: '/upload.htm?m=u',
            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) {
            $('#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) {
            $('#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) {

            $.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) {
            $(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>

Der nachfolgende Code ist für die Darstellung der Vorschau der Dateien zuständig, welche noch nicht hochgeladen wurden:
<!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <div class="template-upload">
            <div class="preview"></div>
            <div class="file_info">
                <div class="file_name">
                    <div class="name">{%=file.name%}</div>
                    <strong class="error text-danger"></strong>
                </div>
                <div class="size">
                    <p class="size">Processing...</p>
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                </div>
            </div>

            <div class="buttons">
                {% if (!i && !o.options.autoUpload) { %}
                    <button class="btn btn-primary start" disabled>
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start</span>
                    </button>
                {% } %}
                {% if (!i) { %}
                    <button class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Abbrechen</span>
                    </button>
                {% } %}
            </div>
        </div>
    {% } %}
    </script>


Der nachfolgende Code ist für die Darstellung der Vorschau der Dateien zuständig, welche bereits hochgeladen wurden:


<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <div class="template-download fade">
        {% if (file.error != undefined) { %}
            <div class="error">{%=file.error%}</div>

        {% } %}
            <div class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </div>

            <div class="file_info">
                <div class="file_name">

                        {% if (file.url33) { %}
                            <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                        {% } else { %}
                            <div><code>{%=file.nameEncoded%}</code></div>
                        {% } %}

                </div>

                <div class="size">{%=o.formatFileSize(file.size)%}</div>
            </div>




        <div class="buttons">
            {% if (file.deleteUrl) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" target="_blank" class="btn download"><span class="glyphicon glyphicon-circle-arrow-down"></span> Download</a>
                <button class="btn delete"  data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    L&ouml;schen
                </button>

            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Abbrechen</span>
                </button>
            {% } %}
        </div>
    </div>
{% } %}
</script>