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

Question

Я пытаюсь использовать демо-версию jQuery File Upload. Я искал через 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; 
    }, 

Answer 1

Глядя на примеры и демо я создал этот jsbin: http://jsbin.com/ivonow/1/

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

Я также должен был установить uploadTemplateId и downloadTemplateId к нулю, так что не будет пытаться загрузить значения по умолчанию:

{ 
    uploadTemplateId: null, 
    downloadTemplateId: null, 
} 

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

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

Answer 2

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

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

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

Примечание 1: узел, который будет удален dynamicaly расчитан классом CSS -шаблона скачать. Поэтому вы должны попытаться поместить этот класс в другую позицию в своем коде (я использовал divs, и он работает для меня). Класс «fade» используется для эффекта перехода.

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

Следующий код экстракт для перезаписи шаблонных загрузок не будет работать

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 '(более старая версия может работать).

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

правильный код, чтобы сделать кнопку Удалить работу, когда overwritting шаблон-скачать это

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; 
    } 
});