私はjqueryファイルアップロードプラグインを私たちのサイトで動作させました： https ：//github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine
ただし、一度はjqueryに関連付けられていたが、廃止されてjqueryから削除されたJavaスクリプトテンプレート言語を使用します。私が一緒に働いている人は、プラグインのテンプレートエンジン部分を削除して、代わりにストレートJavaScriptで記述したいと思っています。テンプレート言語はサポートされていないため、彼はそれをコードに含めることに慣れていません。
私はここで、ドキュメントがストレートJSで独自のテンプレートエンジンを作成することについて説明しているところを見つけました。これは私がしなければならないことだと思います。
https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine
テンプレート言語についてもっと学ぶことが私に役立つかどうかはわかりませんが、それについてはいくつかのサイトを調べました。
現在休暇中ですが、1週間後に戻ってきたら、これに取り掛かる必要があります。
私はかなりの量の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;
}
});