Gitlab CSE Unil

essai_jfu.html 3.51 KB
Newer Older
Julien Furrer's avatar
Julien Furrer committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
{% load static %}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Essai JFU</title>
    <link rel="stylesheet" href="{% static "_src/lib/bootstrap/dist/css/bootstrap.min.css" %}"/>
    <link rel="stylesheet" href="{% static "_src/lib/jquery-file-upload/css/jquery.fileupload.css" %}"/>
</head>
<body>

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Select file...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="image_file" data-url="/u/" accept="image/png,image/jpg">
</span>

<input type="checkbox" checked id="dropable"/>

{#<input id="fileupload" type="file" name="image_file" data-url="/u/" multiple>#}
<div id="progress">
    <div class="bar" style="width: 0%; height:18px;background:green;"></div>
</div>

<script src="{% static "_src/lib/jquery/dist/jquery.min.js" %}"></script>
<script src="{% static "_src/lib/jquery-file-upload/js/vendor/jquery.ui.widget.js" %}"></script>
<script src="{% static "_src/lib/jquery-file-upload/js/jquery.iframe-transport.js" %}"></script>
<script src="{% static "_src/lib/jquery-file-upload/js/jquery.fileupload.js" %}"></script>
<script src="{% static "_src/lib/jquery-file-upload/js/jquery.fileupload-process.js" %}"></script>
<script>

$.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function (xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
    }
});

$.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        processQueue: {
            action: 'validate',
            acceptFileTypes: '@',
            disabled: '@disableValidation'
        }
    },

    processActions: {

        validate: function (data, options) {
            if (options.disabled) {
                return data;
            }
            var dfd = $.Deferred(),
                file = data.files[data.index];
            if (!options.acceptFileTypes.test(file.type)) {
                data.files[data.index].error = 'acceptFileTypes';
                dfd.rejectWith(this, data);
            } else {
                dfd.resolveWith(this, data);
            }
            return dfd.promise();
        }

    }
});


$(function () {
    $('#fileupload').fileupload({
        url: "/u/",
        paramName: "image_file",
        dataType: 'json',
        done: function (e, data) {
            if (!data.result.error && data.result.next) {
                document.location.assign(data.result.next);
            }
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        },
        processQueue: [{
            action: 'validate',
            always: true,
            acceptFileTypes: /(\.|\/)(jpe?g|png)$/i
        }],
        processfail: function(e, data) {
            console.log(data.files[data.index].error);
        }
    });

    $("#dropable").on('click', function(){
        var $me = $(this);
        if ($me.is(":checked")) {
            $('#fileupload').fileupload(
                'option',
                'dropZone',
                $(document)
            );
        } else {
            $('#fileupload').fileupload(
                'option',
                'dropZone',
                null
            );
        }
    });

});
</script>
</body>
</html>