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

【问题标题】：How to customize Upload/Download Template of Blueimp jQuery File Upload如何自定义 Blueimp jQuery 文件上传的上传/下载模板
【发布时间】：2012-07-05 04:36:14
【问题描述】：

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

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

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

【问题讨论】：

在演示中，他的 tr 标签有“template-upload”和“template-download”类。（）。你把这个添加到你的 li 标签了吗？
我添加到第一个div里面的li标签

【解决方案1】：

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

这是演示中的代码。我把html底部的jQuery模板取出来，把上面的uploadTemplate函数加到设置fileupload对象时传入的options里面。

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

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

首先，当您想删除已上传的图片时，您必须使用 template-download 而不是 template-upload .

template-upload 用于预览将要上传的内容，一旦上传，它就会回到模板下载中。

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

注意 1： 将被动态删除的节点是 CSS 类 template-download 的目标。因此，您应该尝试将该类定位到代码中的不同位置（我使用了 div，它对我有用）。 “fade”类用于过渡效果。

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

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

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

因为 de file 对象没有任何 delete_type 也没有 delete_url 参数，只有 deleteType 和 deleteUrl 参数。这适用于 Jquery File Upload 8.9.0 版，虽然'（旧版本可能有效）。

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

覆盖模板下载时使删除按钮起作用的正确代码是

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

【讨论】：