我在我们的网站上成功使用了jquery文件上传插件：https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine
然而，它使用了一种曾经与jquery绑定在一起但已被停用和从jquery中删除的JavaScript模板语言。我的同事希望我删除插件中的模板引擎部分，并改为直接使用纯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）为null ... urn {“\n”：“\ n”，“\ r”：“\ r”，“\ t”：“\ t”，“”：“”}[a] ||“\” + a;如果（c）返回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;
}
});