Blueimp - отключить кнопку удаления для ранее загруженных изображений

Question

Когда я загружаю файлы с помощью скрипта загрузки blueimp, информация о файле сохраняется в таблице данных вместе с отметкой времени загрузки. Теперь, когда я редактирую форму, файлы появляются снова.

Я хочу сделать простую вещь... если текущая метка времени меньше метки времени файла (ранее загружен), то кнопка удаления будет отключена.

По этой причине мне нужно использовать Ajax для проверки. Но, кажется, ничего не работает в <script type='text/x-tmpl'></script> теги.

Я понятия не имею, что такое x-tmpl. Я искал в Интернете и обнаружил, что это какой-то шаблон. Можно ли использовать javascript с этими x-tmpl?

---

Я хочу сделать что-то вроде следующего:

<script id="template-download" type="text/x-tmpl">
    {% if (file.deleteUrl) { %}
    </script>
    <script type="text/javascript">
        var checkAvailability = $.ajax({
            type: 'GET',
            url: "request.php?file="+{% file.deleteUrl %},
            dataType: 'html',
            context: document.body,
            global: false,
            async:false,
            success: function(data) {
            return data;
            }
        }).responseText;
        if(!checkAvailability){
            <button class="btn btn-danger btn-xs delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %} DISABLED>
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
        } else{
            <button class="btn btn-danger btn-xs delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
        }
    </script>
    <script id="template-download" type="text/x-tmpl">
    {% }

Любая помощь или предложения, как я могу использовать AJAX в этом x-tmpl теги для проверки времени?

Answer 1

Я знаю, что это было 2 года назад, но я работал с плагином, и на самом деле я так и сделал:

В HTML-коде у вас есть таблица, которая имеет цель contextx, где файлы de отображаются прямо в классе "files":

<table role="presentation" class="table table-striped">
    <tbody class="files"> <!-- files are displayed right here -->
    </tbody>
</table>

Скрипт text / x-tmpl - это просто шаблон строк таблицы, который получит содержимое и будет добавлен в tbody с классом.files.

Поэтому в файле jquery (main.js) при загрузке существующих файлов перед ajax просто очистите целевой контекст следующим образом:

$('#fileupload').addClass('fileupload-processing');

//clean the context target before load new files        
$('.files').html('');

$.ajax({
    url: $('#fileupload').fileupload('option', 'url'),
    dataType: 'json',
    context: $('#fileupload')[0]
}).always(function () {
    $(this).removeClass('fileupload-processing');
}).done(function (result) {
    $(this).fileupload('option', 'done').call(this, $.Event('done'), {result: result});
});

Но вы также можете использовать параметры jquery для создания шаблона вместо x-tmpl:

$('#fileupload').fileupload({
    filesContainer: $('tbody.files'),
    uploadTemplateId: null,
    downloadTemplateId: null,
    uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<tr class="template-upload fade">' +
                '<td><span class="preview"></span></td>' +
                '<td><p class="name"></p>' +
                '<strong class="error text-danger"></strong>' +
                '</td>' +
                '<td><p class="size">Processando...</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>' +
                '</td>' +
                '<td>' +
                (!index && !o.options.autoUpload ?
                    '<button class="btn btn-primary start" disabled>' +
                    '<i class="fas fa-cloud-upload-alt"></i>' +
                    '<span>Upload</span>' +
                    '</button>' : '') +
                (!index ? '<button class="btn btn-warning cancel">' +
                '<i class="fas fa-ban"></i>' +
                '<span>Cancelar</span>' +
                '</button>' : '') +
                '</td>' +
                '</tr>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(file.error);
            }
            rows = rows.add(row);
        });
        return rows;
    },
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<tr class="template-download fade">' +
                '<td><span class="preview"></span></td>' +
                '<td><p class="name"></p>' +
                (file.error ? '<div><span class="badge badge-danger">Erro</span></div>' : '') +
                '</td>' +
                '<td><span class="size"></span></td>' +
                '<td>' +
                (file.deleteUrl ? '<button class="btn btn-danger delete">' +
                '<i class="fas fa-trash-alt"></i>' +
                '<span>Excluir</span>' +
                '</button>' +
                '<input type="checkbox" name="delete" value="1" class="toggle">' : '<button class="btn btn-warning cancel">' + 
                '<i class="fas fa-ban"></i>' +
                '<span>Cancelar</span>' +
                '</button>') +
                '</td>' +
                '</tr>');
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.name').text(file.name);
                row.find('.error').text(file.error);
            } else {
                row.find('.name').append($('<a></a>').text(file.name));
                if (file.thumbnailUrl) {
                    row.find('.preview').append(
                        $('<a></a>').append(
                            $('<img>').prop('src', file.thumbnailUrl)
                        )
                    );
                }
                row.find('a')
                    .attr('data-gallery', '')
                    .prop('href', file.url);
                row.find('button.delete')
                    .attr('data-type', file.deleteType)
                    .attr('data-url', file.deleteUrl);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});