如何自定义Blueimp jQuery File Upload的上传/下载模板
我正在尝试使用jQuery文件上载演示。 我已经搜索了wiki和模板引擎wiki但是找不到如何在不使用表格行标签的情况下自定义上传/下载模板的答案。 每次我删除/更改表行标记它都不起作用。
Bellow是我自定义的上传模板，它不起作用。 我不知道为什么，有人可以帮忙吗？
uploadTemplate: function (o) { var rows = $(); $.each(o.files, function (index, file) { var row = $('' + '' + '' + '' + (file.error ? '' : '' + '' + '' ) + ' '); 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，但样式仍然很奇怪。
希望这可以帮助。
首先，当您想要删除已上传的图片时，您必须处理模板下载而不是模板上载 。
template-upload用于预览将要上传的内容，一旦上传，它将返回模板下载。
因此，在您的情况下要覆盖的模板应该是模板下载 。 这里有一个很好的例子： https ： //github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine 。
注1：动态删除的节点是CSS类模板下载的目标 。 因此，您应该尝试将该类定位到代码中的不同位置（我使用div并且它适用于我）。 “淡入淡出”类用于过渡效果。
但是，本文档中似乎存在一些错误（可能来自文档中尚未报告的模块升级）。
以下用于重写模板下载的代码提取将不起作用
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 ，tho’（旧版本可能有效）。
因此，如果您只是从文档中复制’n’paste代码，则删除按钮将没有正确的值，因此，它也无法正常工作。
在覆盖模板下载时使删除按钮正常工作的正确代码是
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 = $( '' + (file.error ? '' : '') + ''); //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($('').text(file.name)); if (file.thumbnailUrl) { row.find('.preview').append( $('').append( $('![]()
').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; } });