Cách tùy chỉnh Tải lên/Tải xuống Mẫu của Tệp Tải lên Blueimp jQuery

Question

Tôi đang cố gắng sử dụng Bản trình diễn jQuery File Upload. Tôi đã tìm kiếm thông qua wiki & wiki của mẫu công cụ nhưng không thể tìm thấy câu trả lời cách tùy chỉnh mẫu Tải lên/Tải xuống mà không cần sử dụng thẻ hàng trong bảng. Mỗi lần tôi xóa/thay đổi thẻ hàng của bảng, nó không hoạt động.

Dưới đây là mẫu tải lên tùy chỉnh của tôi và nó không hoạt động. Tôi không biết tại sao, ai đó có thể giúp đỡ?

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

Từ nhìn vào các ví dụ và demo sống tôi đã tạo jsbin này: http://jsbin.com/ivonow/1/

Đó là mã từ bản demo. Tôi lấy ra các mẫu jQuery ở dưới cùng của html và thêm hàm uploadTemplate từ phía trên vào các tùy chọn được truyền vào khi thiết lập đối tượng tải lên tệp.

Tôi cũng đã phải thiết lập uploadTemplateId và downloadTemplateId null vì vậy nó sẽ không cố gắng để tải các giá trị mặc định:

{ 
    uploadTemplateId: null, 
    downloadTemplateId: null, 
} 

Trong html, tôi lấy ra bảng bao quanh mẫu hàng và thêm một UL nhưng kiểu dáng vẫn còn lạ.

Hy vọng điều này sẽ hữu ích.

Answer 2

Vâng trước hết, khi bạn làm việc trên muốn xóa một hình ảnh đã được tải lên, bạn phải làm việc trên mẫu-tải và không phải là mẫu tải lên.

tải lên mẫu được sử dụng để xem trước nội dung sẽ được tải lên và sau khi tải lên, nó sẽ trở lại trong bản tải xuống mẫu.

Do đó, mẫu sẽ bị ghi đè trong trường hợp của bạn phải là tải xuống mẫu. Có một ví dụ tốt về cách thực hiện điều đó tại đây: https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine.

CHÚ Ý 1: nút sẽ bị loại bỏ động được nhắm mục tiêu bởi lớp CSS tải xuống mẫu. Vì vậy, bạn nên cố gắng định vị lớp đó đến vị trí khác trong mã của bạn (tôi đã sử dụng các div và nó hoạt động đối với tôi). Lớp "fade" được sử dụng cho hiệu ứng chuyển tiếp.

BAO GIỜ, có vẻ như có một số lỗi trong tài liệu này (có thể là do nâng cấp mô-đun chưa được báo cáo trong tài liệu).

Các chiết xuất mã sau đây cho việc viết lại các mẫu-tải sẽ không làm việc

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

vì de tập tin đối tượng không có bất kỳ delete_type cũng không delete_url thông số nhưng deleteType và deleteUrl thông số. Đó là dành cho Phiên bản Tải lên tệp Jquery 8.9.0, tho '(phiên bản cũ hơn có thể hoạt động).

Vì vậy, nút xóa sẽ không có giá trị chính xác nếu bạn chỉ cần sao chép và không ghi mã từ tài liệu, do đó, nó sẽ không hoạt động.

Mã đúng để làm cho công việc nút delete khi overwritting mẫu-tải là

row.find('.delete') 
    .attr('data-type', file.deleteType) 
    .attr('data-url', file.deleteUrl); 

Đối với tôi, đoạn code sau làm việc tốt.

$('#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; 
    } 
});