javascript - Blueimp-禁用以前上传的图像的删除按钮

当我通过blueimp上传脚本上传文件时，文件信息与上传时间戳一起存储在数据表中。现在，当我编辑表单时，文件再次出现。

我想做一件简单的事情...如果当前时间戳小于文件时间戳(之前已上传)，则删除按钮将被禁用。

因此，我需要使用Ajax进行验证。但是<script type='text/x-tmpl'></script>标记中似乎没有任何作用。

我不知道什么是x-tmpl。我在网上搜索，发现它是某种模板。可以在这些x-tmpl中使用javascript吗？

我想做以下事情:

<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">
    {% }

有什么帮助或建议，如何在x-tmpl标记内使用AJAX进行时间戳验证？

最佳答案

我知道那是2年前的事，但是我一直在使用插件，实际上我就是这样:

在html代码中，您有一个具有contex目标的表，其中的de文件直接显示在“files”类中:

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

脚本text / x-tmpl只是表行的模板，该行将接收内容并通过.files类添加到tbody中

因此，在加载现有文件的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;
    }
});