Как настроить загрузку/загрузку шаблона загрузки файла Blueimp jQuery

Я пытаюсь использовать загрузку файлов jQuery. Я просмотрел wiki и вики-движок шаблонов, но не смог найти ответ, как настроить шаблон загрузки/загрузки без использования тега строки таблицы. Каждый раз, когда я удаляю/изменяю тег строки таблицы, он не работает.

Bellow - это мой настраиваемый шаблон загрузки, и он не работает. Я не знаю, почему, может ли кто-нибудь помочь?

uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<li class="span3"><div class="thumbnail template-upload">' +
                '<div class="preview"><span></span></div>' +
                '<div class="caption"><h5 class="name"></h5>' +
                '<p class="size"></p>' +
                (file.error ? '<div class="error" colspan="2"></div>' :
                        '<div><div class="progress">' +
                            '<div class="bar" style="width:0%;"></div></div></div>' +
                            '<div class="start"><button>Start</button></div>'
                ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>');
            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;
    },

Ответ 1

От взгляда на примеры и живую демонстрацию я создал этот jsbin: http://jsbin.com/ivonow/1/

Это код из демонстрации. Я вынул шаблоны jQuery в нижней части html и добавил функцию uploadTemplate сверху к параметрам, переданным при настройке объекта fileupload.

Мне также пришлось установить uploadTemplateId и загрузитьTemplateId в null, чтобы он не пытался загружать значения по умолчанию:

{
  uploadTemplateId: null,
  downloadTemplateId: null,
}

В html я достал таблицу, которая окружает шаблоны строк и добавляет UL, но стиль еще странный.

Надеюсь, что это поможет.

Ответ 2

Ну, во-первых, когда вы хотите работать над удалением загруженного изображения, вам нужно работать с шаблоном-загрузкой, а не с шаблоном-upload.

template-upload используется для предварительного просмотра того, что будет загружено, и после его загрузки он возвращается в шаблон-загрузке.

Следовательно, шаблон, который должен быть перезаписан в вашем случае, должен быть template-download. Здесь есть хороший пример того, как это сделать: https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine.

ПРИМЕЧАНИЕ 1: node, который будет удален динамически, нацелен на шаблон-шаблон CSS-шаблона. Поэтому вы должны попытаться поместить этот класс в другую позицию в своем коде (я использовал divs, и он работает для меня). Класс "fade" используется для эффекта перехода.

ОДНАКО, кажется, что в этой документации есть некоторые ошибки (возможно, из-за обновления модуля, о котором не сообщалось в документе).

Следующий фрагмент кода для перезаписи шаблона-загрузки не будет работать

row.find('.delete')
    .attr('data-type', file.delete_type)
    .attr('data-url', file.delete_url);

потому что у объекта файл нет параметров delete_type и delete_url, но deleteType и deleteUrl. Это для загрузки файла JQuery версии 8.9.0, tho '(более старая версия может работать).

Таким образом, кнопка удаления не будет иметь правильных значений, если вы просто скопируете код из документа, поэтому он тоже не будет работать.

Правильный код, чтобы заставить кнопку удаления работать при перезаписывании шаблона, -

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 = $( '<div class="template-download fade"><span class="preview"></span>' +
                (file.error ? '<div class="error"></div>' : '') +
                '<button class="delete">Delete</button></div>');
            //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($('<a></a>').text(file.name));
                if (file.thumbnailUrl) {
                    row.find('.preview').append(
                        $('<a></a>').append(
                            $('<img>').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;
    }
});