12

我正在尝试使用jQuery File Upload Demo。我搜索了wiki和模板引擎 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;
    },
4

2 回答 2

7

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

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

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

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

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

希望这可以帮助。

于 2012-11-28T05:09:40.467 回答
4

首先，当您想删除已上传的图片时，您必须处理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文件对象没有任何delete_type和delete_url参数，而是deleteType和deleteUrl参数。那是针对Jquery File Upload version 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;
    }
});
于 2013-10-25T17:12:17.880 回答