如何自定义 Blueimp jQuery 文件上传的上传/下载模板

How to customize Upload/Download Template of Blueimp jQuery File Upload

本文关键字：下载 Blueimp jQuery 文件 自定义      更新时间：2023-09-26

>我正在尝试使用jQuery文件上传演示。我已经搜索了维基和模板引擎维基，但找不到如何在不使用表格行标签的情况下自定义上传/下载模板的答案。每次我删除/更改表行标签时，它都不起作用。

波纹管是我的自定义上传模板，它不起作用。我不知道为什么，有人可以帮忙吗？

uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<li class="span3"><div class="thumbnail template-upload">' +
                '<div class="preview"><span></span></div>' +
                '<div class="caption"><h5 class="name"></h5>' +
                '<p class="size"></p>' +
                (file.error ? '<div class="error" colspan="2"></div>' :
                        '<div><div class="progress">' +
                            '<div class="bar" style="width:0%;"></div></div></div>' +
                            '<div class="start"><button>Start</button></div>'
                ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(
                    locale.fileupload.errors[file.error] || file.error
                );
            }
            rows = rows.add(row);
        });
        return rows;
    },

通过查看示例和现场演示，我创建了这个jsbin： http://jsbin.com/ivonow/1/

这是演示中的代码。我取出了 html 底部的 jQuery 模板，并将上面的 uploadTemplate 函数添加到设置 fileupload 对象时传入的选项中。

我还必须将 uploadTemplateId 和 downloadTemplateId 设置为 null，这样它就不会尝试加载默认值：

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

在 html 中，我取出了围绕行模板的表格并添加了一个 UL，但样式仍然很奇怪。

希望这有帮助。

首先，当您要删除已上传的图片时，您必须处理模板下载而不是模板上传。

模板上传

用于预览要上传的内容，上传后，它会返回到模板下载中。

因此，在您的情况下，要覆盖的模板应该是模板下载。这里有一个关于如何做到这一点的很好的例子：https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine。

注 1：要动态删除的节点是 CSS 类模板下载的目标。因此，您应该尝试将该类定位到代码中的不同位置（我使用了divs，它对我有用）。"fade"类用于过渡效果。

但是，本文档中似乎存在一些错误（可能来自文档中未报告的模块升级）。

以下用于重写模板下载的代码摘录将不起作用

row.find('.delete')
    .attr('data-type', file.delete_type)
    .attr('data-url', file.delete_url);

因为 de 文件对象没有任何delete_type也没有任何delete_url参数，而是 deleteType 和 deleteUrl 参数。这是针对Jquery文件上传版本8.9.0的（旧版本可能有效）。

因此

，如果您只是从文档中复制并粘贴代码，则删除按钮将没有正确的值，因此，它也不起作用。

在

重写模板下载时使删除按钮工作的正确代码是

row.find('.delete')
    .attr('data-type', file.deleteType)
    .attr('data-url', file.deleteUrl);

对我来说，以下代码工作正常。

 $('#fileupload').fileupload({  
    downloadTemplateId: '',
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $( '<div class="template-download fade"><span class="preview"></span>' +
                (file.error ? '<div class="error"></div>' : '') +
                '<button class="delete">Delete</button></div>');
            //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('.delete')
                    .attr('data-type', file.deleteType)
                    .attr('data-url', file.deleteUrl);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});
相关文章：