Question

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

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

Answer 1

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

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

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

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

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

希望这有帮助。

Answer 2

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

模板上传用于预览将要上传的内容，一旦上传，就会在模板下载中重新上传。

因此，在您的案例中要覆盖的模板应为模板下载。这里有一个很好的例子：https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine。

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

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

以下用于重写模板下载的代码摘录无效

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 ，tho'（旧版本可能有效）。

因此，如果您只是复制'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;
    }
});

如何自定义Blueimp jQuery File Upload的上传/下载模板

2 个答案: