如何自定義上傳/下載Blueimp jQuery文件上傳模板

Question

我正在嘗試使用jQuery File Upload Demo。我已通過wiki &搜索了模板引擎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/

這是從演示代碼。我拿出了html底部的jQuery模板，並將上面的uploadTemplate函數添加到設置fileupload對象時傳入的選項中。

我也不得不設置uploadTemplateId和downloadTemplateId爲null，所以它不會嘗試加載默認值：

{ 
    uploadTemplateId: null, 
    downloadTemplateId: null, 
} 

在HTML，我拿出圍繞該行的模板並添加表UL，但造型仍然很奇怪。

希望這會有所幫助。

Answer 2

那麼首先，當你在刪除已上傳了照片想工作，你必須對模板下載，而不是模板上傳工作。

template-upload用於預覽要上傳的內容，一旦上傳，它將返回模板下載。

因此，在您的案例中被覆蓋的模板應該是模板下載。這裏有一個很好的例子：https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine。

注1：將被刪除dynamicaly的節點由CSS類模板下載針對性。所以你應該嘗試將這個類定位到你的代碼中的不同位置（我使用了divs，它適用於我）。 「淡入淡出」類用於過渡效果。

然而，似乎這個文檔中有一些錯誤（可能來自未在文檔中報告的模塊的升級）。

改寫模板下載下面的代碼片段將無法​​正常工作

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，壽（舊版本可能工作）。

因此，如果您只是從文檔複製'n'代碼，那麼刪除按鈕將不會有正確的值，因此它也不起作用。

正確的代碼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; 
    } 
});