Я использую handlebars.js в качестве моего механизма шаблонов с загрузкой файла jQuery, и когда я загружаю файл, он мигает на экране, а затем полностью исчезает, даже не скрывается в dom.
Мой JavaScript:
$('#photo-uploader').fileupload({
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
autoUpload: true,
maxFileSize: 5000000,
url: '/member/property/ajaxUpload',
filesContainer: $('.files'),
uploadTemplateId: null,
uploadTemplate: function(o) {
var rows = $();
$.each(o.files, function(index, file) {
var source = $('#photo-upload').html();
var template = Handlebars.compile(source);
var data = {o: o, file: file};
var template = template(data);
var row = $(template);
rows = rows.add(row);
});
return rows;
}
});
Шаблоны ручек:
<script id="photo-upload" type="text/x-handlebars-template">
<li class="template-upload upload-thumbs img-thumb">
<span class="preview"></span>
<a href="#" class="delete-image">Delete</a>
<a href="#" class="view-image">View</a>
<h3>Title <em>Click to edit</em></h3>
</li>
</script>
Если я заменил метод uploadTemplate тем, что в примере он работает, единственное, что отличается от объекта, это тег.
https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine
Добавьте класс fade
в ваш <li>
, поскольку загрузка файла jQuery использует Bootstrap для отображения/скрытия элементов