刷新Dropzone中的文件列表

时间:2018-10-10 16:34:58

标签: javascript dropzone.js dropzone

我在 Dropzonejs 上遇到了一个小问题。

我有此代码:

Dropzone.options.dpzMultipleFiles = {
    dictDefaultMessage: "Przeciągnij pliki aby dodać",
    uploadMultiple: true,
    paramName: "file",
    maxFilesize: 50,
    maxFiles: 15,
    createImageThumbnails: true,
    acceptedFiles: ".png,.jpg,.jpeg",
    clickable: true,
    thumbnailWidth: 200,
    thumbnailHeight: 200,
    autoProcessQueue: true,

    init: function () {
        dpzMultipleFiles = this;
        $.ajax({
            url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
            type: 'get',
            dataType: 'json',
            cache: false,
            success: function (response) {
                $.each(response, function (key, value) {
                    dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles - 1;
                    var mockFile = {name: value.name, size: value.size}

                    dpzMultipleFiles.emit('addedfile', mockFile)
                    dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                    dpzMultipleFiles.emit('complete', mockFile)
                })
            },
            error: function (response) {
                alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
            }
        });


        this.on('completemultiple', function (file, json) {
            //$('.sortable').sortable('enable');
        });
        this.on("thumbnail", function (file, dataUrl) {
            $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
        }),


            this.on('success', function (file, json) {
                if (file.accepted == true) {

                    $('.dz-preview').remove();
                    this.removeAllFiles;
                }
            });
        this.on('successmultiple', function () {
            $('.dz-preview').remove()
            $.ajax({
                url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
                type: 'get',
                dataType: 'json',
                cache: false,
                success: function (response) {
                    $.each(response, function (key, value) {
                        var mockFile = {name: value.name, size: value.size}
                        dpzMultipleFiles.emit('addedfile', mockFile)
                        dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                        dpzMultipleFiles.emit('complete', mockFile)
                    });
                }
                ,
                error: function (response) {
                    alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                }
            });
        })
        this.on("addedfile", function (file) {
            var removeButton = Dropzone.createElement("<button class='remove_file_dropzone'> Skasuj plik </button>");
            removeButton.addEventListener("click", function (e) {
                e.preventDefault();
                e.stopPropagation();

                $.ajax({
                    url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/RemoveFile/' + file.name,
                    dataType: 'text',
                    type: 'post',
                    cache: false,
                    data: $(this).serialize(),
                    success: function (data, textStatus, jQxhr) {
                        x = confirm('Czy napewno chcesz skasować ten plik?');
                        if (!x) return false;
                        dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles + 1;
                        $('.dz-preview').remove();
                        this.removeAllFiles;
                        $.ajax({
                            url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
                            type: 'get',
                            dataType: 'json',
                            cache: false,
                            success: function (response) {
                                $.each(response, function (key, value) {
                                    var mockFile = {name: value.name, size: value.size}
                                    dpzMultipleFiles.emit('addedfile', mockFile)
                                    dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
                                    dpzMultipleFiles.emit('complete', mockFile)
                                });
                            }
                            ,
                            error: function (response) {
                                alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                            }
                        });
                    }, error: function (jqXhr, textStatus, errorThrown) {
                        alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                    }
                });
            });
            file.previewElement.appendChild(removeButton);
        });
        this.on("maxfilesexceeded", function (file) {
            this.removeFile(file);
        });
        this.on('resetFiles', function () {
            dpzMultipleFiles.removeAllFiles();
        });
        this.on('queuecomplete', function () {
            //$('.dz-preview').remove();
        });
        this.on('drop', function () {

        });
        this.on('complete', function () {
        });
    }
};


$(function () {
    $(".dropzone").sortable({
        items: '.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '.dropzone',
        distance: 20,
        tolerance: 'pointer',
        update: function (event, ui) {
            $(".dz-filename span").each(function (index) {
                $.ajax({
                    url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ChangeFileOrder/' + $(this).text() + "/" + index,
                    dataType: 'text',
                    type: 'post',
                    cache: false,
                    data: $(this).serialize(),
                    success: function (data, textStatus, jQxhr) {

                    }, error: function (jqXhr, textStatus, errorThrown) {
                        alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
                    }
                });
            });
        }
    });
});

该脚本正常工作100%:) 唯一的问题是刷新文件。文件列表在上传100%完成之前刷新了我。

我希望在完整上传所有文件后(而不是之前)刷新文件列表。

有人知道如何改进我的代码吗?

0 个答案:

没有答案