image_add.js

image_add.js

{% block javascripts %}
    <script src="//blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
    <script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
    <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
    <script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
    <script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-image.js"></script>
    <script type="text/javascript">
        $('#{{ form.image.vars.id}}').fileupload({
            url: "{{ url("image_add") }}",
            type: "post",
            dataType: 'json',
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 5000000, // 5 MB
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                    .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true,
            maxNumberOfFiles: 1,
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('#files .file').remove();
                    var path = '{{ asset('', 'uploads') }}' + file;
                    var files = $('<div/>').addClass("file").appendTo('#files');
                    files.append($('<img />').attr({src: path}));
                    $('#{{ form.file_name.vars.id }}').val(file);
                });
            },
            fail: function (e, data) {
            },
            always: function (e, data) {
                $('.progress').hide();
                $('.progress .progress-bar').width('0%');
            },
            start: function (e, data) {
                $('.progress').show();
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress .progress-bar').css(
                        'width',
                        progress + '%'
                        );
            },
            processalways: function (e, data) {
                if (data.files.error) {
                    alert("エラー");
                }
            },
        });
    </script>
{% endblock %}