我在我们的网站上安装了 jquery 文件上传插件： https ://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine
然而，它使用了一种 java 脚本模板语言，该语言曾一度与 jquery 绑定，但已被停止并从 jquery 中删除。与我一起工作的人希望我删除插件的模板引擎部分并用直接的 javascript 编写它。由于不支持模板语言，他不喜欢在我们的代码中使用它。
我在这里找到了文档讨论在直接 JS 中创建自己的模板引擎的地方，我想这是我需要做的。
https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine
我不确定了解更多有关模板语言的信息是否对我也有帮助，我已经查看了一些关于模板语言的网站。
我现在正在度假，但是当我一周后回来时，我需要开始处理这个问题。
我写了相当多的 javascript 和 jquery 的东西，但我并不总是对所有的习语都非常熟悉，在某些情况下我会复制和粘贴代码示例。
这是您自己的模板引擎的代码示例。我猜它设置了回调..我基本上必须剪切和粘贴它，看看它是否有效。我确实尝试过，但最初它对我不起作用。
$('#fileupload').fileupload({
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td class="preview"><span class="fade"></span></td>' +
'<td class="name"></td>' +
'<td class="size"></td>' +
(file.error ? '<td class="error" colspan="2"></td>' :
'<td><div class="progress">' +
'<div class="bar" style="width:0%;"></div></div></td>' +
'<td class="start"><button>Start</button></td>'
) + '<td class="cancel"><button>Cancel</button></td></tr>');
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;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
(file.error ? '<td></td><td class="name"></td>' +
'<td class="size"></td><td class="error" colspan="2"></td>' :
'<td class="preview"></td>' +
'<td class="name"><a></a></td>' +
'<td class="size"></td><td colspan="2"></td>'
) + '<td class="delete"><button>Delete</button> ' +
'<input type="checkbox" name="delete" value="1"></td></tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(
locale.fileupload.errors[file.error] || file.error
);
} else {
row.find('.name a').text(file.name);
if (file.thumbnail_url) {
row.find('.preview').append('<a><img></a>')
.find('img').prop('src', file.thumbnail_url);
row.find('a').prop('rel', 'gallery');
}
row.find('a').prop('href', file.url);
row.find('.delete button')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
}
});
这是我在文件加载完成后调用的一些工作代码。这是否需要与上述代码结合才能工作？
为什么这段代码是一种形式为 $(function() { $("#fileupload").fileupload(){ ...
另一个代码示例不在匿名函数中。也许这并不重要？
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
var str = "<h4>" + data.result.name + ' - ' + data.result.text_status + "</h4>";
console.log(str);
<% if @ie %>
data.context.html(str);
$("#files_tbody").append("<tr>" + str + "</tr>");
<% else %>
data.context.html(str);
<% end %>
}
});
});
我尝试将这两个代码段分开，如图所示，但我的上传不起作用，我尝试将它们组合如下，但这也不起作用..任何关于我缺少什么或在哪里查看的建议将不胜感激..
使用下面的代码块，我在 firebug 中收到文件加载错误：
TypeError: $("#fileupload").fileupload 不是函数 downloadTemplate: function (o) {
并且：
TypeError: document.getElementById(a) is null ...urn{"\n":"\n","\r":"\r","\t":"\t"," ":" " }[a]||"\"+a;if(c)return c==="="?"'+...
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
var str = "<h4>" + data.result.name + ' - ' + data.result.text_status + "</h4>";
console.log(str);
<% if @ie %>
data.context.html(str);
$("#files_tbody").append("<tr>" + str + "</tr>");
<% else %>
data.context.html(str);
<% end %>
}
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td class="preview"><span class="fade"></span></td>' +
'<td class="name"></td>' +
'<td class="size"></td>' +
(file.error ? '<td class="error" colspan="2"></td>' :
'<td><div class="progress">' +
'<div class="bar" style="width:0%;"></div></div></td>' +
'<td class="start"><button>Start</button></td>'
) + '<td class="cancel"><button>Cancel</button></td></tr>');
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;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
(file.error ? '<td></td><td class="name"></td>' +
'<td class="size"></td><td class="error" colspan="2"></td>' :
'<td class="preview"></td>' +
'<td class="name"><a></a></td>' +
'<td class="size"></td><td colspan="2"></td>'
) + '<td class="delete"><button>Delete</button> ' +
'<input type="checkbox" name="delete" value="1"></td></tr>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(
locale.fileupload.errors[file.error] || file.error
);
} else {
row.find('.name a').text(file.name);
if (file.thumbnail_url) {
row.find('.preview').append('<a><img></a>')
.find('img').prop('src', file.thumbnail_url);
row.find('a').prop('rel', 'gallery');
}
row.find('a').prop('href', file.url);
row.find('.delete button')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
}
});