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

Question

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

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

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

- bachcao

---

在演示中，他的tr标签具有“template-upload”和“template-download”类（<tr class =“template-upload fade”>）。你是否将其添加到了你的li标签中？ - Blake Simpson

我在 li 标签内的第一个 div 中添加了内容。 - bachcao

Answer 1

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

这是来自演示的代码。我将底部的jQuery模板移除，并在设置fileupload对象时添加了上面提到的uploadTemplate函数到选项中。

我还需要将uploadTemplateId和downloadTemplateId设置为null，以便它不会尝试加载默认值：

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

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

希望这有所帮助。

- doowb

Answer 2

首先，当您想要删除已上传的图片时���您需要操作的是template-download而不是template-upload。 template-upload用于预览即将上传的内容，一旦上传完成，会返回到template-download。

因此，在您的情况下需要被覆盖的模板应该是template-download。 这里有一个很好的示例： https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine。

注意1：将动态移除的节点定位为CSS类template-download。因此，您应该尝试将该类定位到代码中的不同位置（我使用div并且它对我有效）。 "fade"类用于过渡效果。

然而，看起来这份文档存在一些错误（可能是由于未在文档中报道的模块升级所导致）。

以下重写template-download的代码片段将无法正常工作。

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

因为文件对象没有任何delete_type和delete_url参数，但有deleteType和deleteUrl参数。这是针对Jquery File Upload 8.9.0版本的，旧版本可能会起作用。

如果你只是简单地从文档中复制粘贴代码，则删除按钮将不会具有正确的值，因此它也无法正常工作。

要使删除按钮在覆盖template-download时起作用的正确代码为：

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

- Luc Lérot