Cách điền Kendo Tải lên với các tệp đã tải lên trước đây

Question

Tôi đang sử dụng Tải lên tệp giao diện người dùng Kendo cho MVC và nó hoạt động tốt. Trên trang chỉnh sửa của tôi, tôi muốn hiển thị các tệp đã được tải lên trước đó từ trang Tạo. Để đảm bảo tính nhất quán về hình ảnh, tôi muốn sử dụng lại tiện ích tải lên trên trang chỉnh sửa của mình để người dùng có thể sử dụng chức năng "xóa" hoặc thêm các tệp bổ sung nếu họ chọn. Tiện ích tải lên có hỗ trợ điều này không?

Cảm ơn!

Answer 1

Một số tìm kiếm thêm đã cho tôi câu trả lời tôi không tìm kiếm - Theo this và this, Telerik không hỗ trợ di trú trước một widget upload với các tài liệu được tải lên trước đó.

Answer 2

Tôi đã tìm ra cách để thực hiện việc này.

Về cơ bản, bạn cần HTML bắt chước những gì mà điều khiển Tải lên tạo ra và bạn sử dụng một chút JavaScript để móc từng mục lên. Ban đầu, tôi hiển thị HTML là ẩn, sau khi bạn khởi tạo điều khiển Tải lên Kendo, bạn nối thêm danh sách HTML vào vùng chứa mẹ mà Kendo tạo.

Đây là quan điểm MVC của tôi:

@if (Model.Attachments != null && Model.Attachments.Count > 0) 
{ 
    <ul id="existing-files" class="k-upload-files k-reset" style="display: none;"> 
    @foreach (var file in Model.Attachments) 
    { 
     <li class="k-file" data-att-id="@file.Id"> 
     <span class="k-icon k-success">uploaded</span> 
     <span class="k-filename" title="@file.Name">@file.Name</span> 
     <button type="button" class="k-button k-button-icontext k-upload-action"> 
      <span class="k-icon k-delete"></span> 
      Remove 
     </button> 
     </li> 
    } 
    </ul> 
} 

và đây là hoạt Javascript (lưu ý, nó được tạo ra từ CoffeeScript):

var $fileList, $files, item, _fn, _i, _len; 
$fileList = $("#existing-files"); 
if ($fileList.length > 0) { 
    $(".k-upload").append($fileList); 
    $files = $(".k-file"); 
    _fn = function(item) { 
    var $item, fileId, filenames; 
    $item = $(item); 
    fileId = $item.data("att-id"); 
    filenames = [ 
     { 
     name: fileId 
     } 
    ]; 
    return $item.data("fileNames", filenames); 
    }; 
    for (_i = 0, _len = $files.length; _i < _len; _i++) { 
    item = $files[_i]; 
    _fn(item); 
    } 
    $fileList.show(); 
} 

Bạn có thể tìm full write up on my blog nơi tôi đi vào chiều sâu trên chủ đề. Tôi hy vọng cái này sẽ giúp bạn!

Answer 3

Vì vậy, tôi nhận ra đây là câu hỏi khá cũ, nhưng gần đây tôi đã tìm ra cách thực hiện điều này một cách đáng tin cậy. Trong khi câu trả lời khác ở đây chắc chắn sẽ hiển thị các tập tin, nó không thực sự dây nó lên đến bất kỳ sự kiện (cụ thể là "loại bỏ" sự kiện). Ngoài ra, thay vì tự thiết lập tất cả những điều này, tôi nghĩ tôi muốn Kendo làm tất cả những công việc bẩn thỉu thực sự.

Lưu ý, điều này chỉ áp dụng nếu tệp tải lên của bạn không được đặt thành tự động đồng bộ hóa. Nếu bạn sử dụng tính năng tự động tải lên, bạn có thể tìm thấy ví dụ trong tài liệu Kendo ở đây: http://docs.kendoui.com/api/web/upload#configuration-files

Vì vậy, dù sao, chúng ta hãy giả sử chúng ta có một đầu vào tập tin mà chúng tôi đã thực hiện thành một Kendo Tải lên:

<input id="files" name="files" type="file" multiple="multiple" /> 

$(document).ready(function() { 
    var $upload = $("#files"); 
    var allowMultiple = Boolean($upload.attr("multiple")); 

    $upload.kendoUpload({ 
     multiple: allowMultiple, 
     showFileList: true, 
     autoUpload: false   
    }); 
} 

Sau đó, chúng tôi chỉ cần lấy thông tin về các tệp vào jQuery của chúng tôi. Tôi thích mứt nó vào chuỗi JSON trong các lĩnh vực ẩn, nhưng bạn có thể làm điều đó tuy nhiên bạn muốn.

Dưới đây là một ví dụ sử dụng HtmlHelpers MVC và JSON.NET Newtonsoft của (tôi không sử dụng Razor, nhưng bạn sẽ nhận được các ý tưởng chung):

if (Model.Attachments.Count > 0) 
{ 
    var files = Model.Attachments.Select(x => new { name = x.FileName, extension = x.FileExtension, size = x.Size }); 
    var filesJson = JsonConvert.SerializeObject(files); 
    Html.Render(Html.Hidden("existing-files", filesJson)); 
} 

Lưu ý, định dạng có vô cùng quan trọng . Chúng tôi buộc để phù hợp với cấu trúc của đối tượng JavaScript Kendo được mong đợi:

{ 
    relatedInput : sourceInput, 
    fileNames: [{ // <-- this is the collection we just built above    
     name: "example.txt", 
     extenstion: ".txt",    
     size: 1234 
    }] 
} 

Vì vậy, sau đó tất cả những gì còn lại để làm là đặt nó tất cả cùng nhau.Về cơ bản, chúng ta sẽ tái tạo onSelect chức năng từ của Kendo nội syncUploadModule:

$(document).ready(function() { 
    // setup the kendo upload 
    var $upload = $("#files"); 
    var allowMultiple = Boolean($upload.attr("multiple")); 

    var upload = $upload.kendoUpload({ 
     multiple: allowMultiple, 
     showFileList: true, 
     autoUpload: false   
    }).getKendoUpload(); 

    // initialize the files 
    if (upload) { 
     var filesJson = $("[name$='existing-files']").val(); 
     if (filesJson) {     
      var files = JSON.parse(filesJson); 

      var name = $.map(files, function (item) { 
       return item.name; 
      }).join(", "); 

      var sourceInput = upload._module.element.find("input[type='file']").last(); 
      upload._addInput(sourceInput.clone().val("")); 
      var file = upload._enqueueFile(name, { 
       relatedInput : sourceInput, 
       fileNames : files 
      }); 
      upload._fileAction(file, "remove"); 
     } 
    } 
}); 

Và đó là khá nhiều đó!

Answer 4

Nó đã được thêm vào trong các tùy chọn vì câu hỏi này đã được hỏi.

Kiểm tra http://docs.telerik.com/kendo-ui/api/web/upload#configuration-files

Chỉ hoạt động ở chế độ không đồng bộ.

Answer 5

Hãy thử này ...

  @(Html.Kendo().Upload() 
       .Name("files") 
       .Async(a => a 
        .Save("SaveFile", "Home") 
        .Remove("RemoveFile", "Home") 
        .AutoUpload(true)) 
       .Files(files => 
       { 
        if (Model.FundRequest.Files.IsNotNullAndHasItems()) 
        { 
         foreach (var file in Model.FundRequest.Files) 
         { 
          files.Add().Name(file.Name).Extension(Path.GetExtension(file.Name)).Size((long)file.SizeKb * 1024); 
         } 
        } 
       })) 

mẫu của tôi có một tham chiếu đến "FundRequest" của tôi đối tượng mà có một Danh sách "File" đối tượng, vì vậy tôi chỉ lặp qua mỗi "File" và thêm.