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

Question

当我通过 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 的任何帮助或建议用于时间戳验证目的的标签？

Answer 1

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

在 html 代码中，您有一个包含 contex 目标的表，其中 de 文件显示在"file"类中:

<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;
    }
});