如何用先前上傳的文件填充Kendo上傳

Question

我正在使用用於MVC的Kendo UI文件上傳，它的效果很好。在我的編輯頁面上，我想顯示先前從創建頁面上傳的文件。爲了保持視覺一致性，我想在我的編輯頁面上重新使用上傳小部件，以便用戶可以使用「刪除」功能，或者如果他們選擇添加其他文件。上傳小部件是否支持這個功能？

謝謝！

Answer 1

一些額外的搜索給了我沒有尋找的答案 - 據this和this，Telerik的不支持預填充與之前上傳的文件上傳控件。

Answer 2

我想出了一個辦法來做到這一點。

基本上，您需要HTML來模仿上傳控件生成的內容，並使用一些JavaScript來鉤住每個項目。我最初將HTML渲染爲隱藏，然後在初始化Kendo上載控件後，將HTML列表追加到Kendo創建的父容器中。

這是我的MVC觀點：

@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> 
} 

這裏是JavaScript（注意，它是從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(); 
} 

您可以找到full write up on my blog，我進入深度上話題。我希望這可以幫助你！

Answer 3

所以，我意識到這是一個很老的問題，但我最近想出瞭如何可靠地做到這一點。雖然這裏的其他答案肯定會顯示這些文件，但它不會真正將它連接到任何事件（特別是「刪除」事件）。而且，我並不是手動設置所有這些，而是​​想讓劍道做所有真正的骯髒工作。

注意，這僅適用於文件上傳沒有設置爲自動同步的情況。如果您使用自動上傳功能，你可以找到劍道文檔在這裏的例子：http://docs.kendoui.com/api/web/upload#configuration-files

所以無論如何，讓我們假設我們有一個我們已經做成劍道上傳文件輸入：

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

然後，我們只需要獲取關於這些文件的信息給我們的jQuery。我喜歡將它嵌入到隱藏字段中的JSON字符串中，但是您可以根據需要進行操作。

下面是使用MVC HtmlHelpers和Newtonsoft的JSON.NET（我不使用剃鬚刀，但你應該得到的總體思路）爲例：

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

注意，格式有非常重要 。我們綁匹配JavaScript對象的那個劍道期待結構：

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

這樣，那麼所有剩下要做的就是把它放在一起。基本上，我們打算從劍道的內部syncUploadModule重建onSelect功能：

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

而這幾乎是它！

Answer 4

它的選項被加入，因爲這問題已經被問。

退房http://docs.telerik.com/kendo-ui/api/web/upload#configuration-files

它只能在異步模式。

Answer 5

嘗試......

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

我的模型必須有「文件」對象的名單我「FundRequest」對象的引用，所以我只是通過每個「文件」循環和補充。