kendo ui imagebrowser默認圖像文件夾

Question

我已經使用此代碼嘗試生成圖像瀏覽器。 http://www.telerik.com/forums/imagebrowser-with-images-from-database

我不明白它從哪裏得到的文件夾圖像？ 我在這裏找到了圖像上的默認文件夾：Content \ kendo \ 2013.2.716 \ Default，但是我找不到它在哪裏或是否曾經使用它。

我不知道如果真的是我的問題。

正如你可以保持加載和文件夾圖像從不顯示。

我跟着上面的鏈接的例子中的代碼，這是我結束了。當我添加一個文件夾時，它將文件夾添加到數據庫中，並且還添加了圖像。

當我添加一個圖像時，它顯示縮略圖和文件名稱，但是當我重新加載頁面時，我最終獲得了與該文件夾相同的結果。

這就是我所說的代碼時，它讀取文件：

public JsonResult Read(string path) 
    { 
     var folders = imageBrowserRepository.Folders(path); 

     var images = imageBrowserRepository.Images(path); 

     return Json(folders.Concat(images)); 
    } 



    public IEnumerable<ImageBrowserEntry> Folders(string path) 
    { 
     return Folders(GetFolderByPath(path)); 
    } 

    public Folder GetFolderByPath(string path) 
    { 
     if (string.IsNullOrEmpty(path) || path == "/") 
     { 
      return GetRootFolder(); 
     } 

     var name = GetFolderNames(path).Last().ToLower(); 

     if (!path.StartsWith("/")) 
     { 
      path = "/" + path; 
     } 

     path = NormalizePath(path, name); 

     return travelContext.Folders.FirstOrDefault(f => f.Path.ToLower() == path && f.Name.ToLower() == name); 
    } 


    public Folder GetRootFolder() 
    { 
     return travelContext.Folders.SingleOrDefault(f => f.Parent == null); 
    } 

這是文件夾/圖像的樣子是獲取返回

我猜它可能與文件大小有關？

Answer 1

你還沒有給出關於你的圖像瀏覽器配置的任何細節，但你必須檢查你的配置「kendoEditor」jquery對象初始化的「imageBrowser」屬性，如Image Browser Configuration所述。 Jquery代碼如下例所示。

$(document).ready(function(){ 
    $("#editor").kendoEditor({ 
     imageBrowser: { 
      transport:`enter code here` { 
       read: "imagebrowser/read", 
       destroy: "imagebrowser/destroy", 
       create: "imagebrowser/createDirectory", 
       uploadUrl: "imagebrowser/upload", 
       thumbnailUrl: "imagebrowser/thumbnail" 
       imageUrl: "/content/images/{0}" 
      } 
     } 
    }); 
    }); 

作爲每imageBrowser.transport和imageBrowser.transport.read配置，我認爲當在編輯圖像瀏覽器圖標用戶點擊它使AJAX請求路徑，其在讀取屬性設置爲按照實施例高於其「ImageBrowser的/讀」，這api需要返回大小爲json數組格式的所有圖像名稱數組：

[{「name」：「foo」，「type」：「d」}，{「name」：「bar.png」 ，「type」：「f」，「size」：15289}]

因此請檢查您的配置並正確設置您的API以使其正常工作。

Answer 2

這裏我的代碼：

$("#yourID").kendoEditor(
     { 
      tools: 
       [ 
        ... 
       ], 
      messages: { 
       ... 
      }, 
      encoded: false, 
      imageBrowser: { 
       messages: { 
        dropFilesHere: "Drop and Drag Images" 
       }, 
       transport: { 
        read: { 
         url: "ImageLogic/ReadImage", 
         dataType: "json", 
         type: "POST" 
        }, 
        destroy: { 
         url: "ImageLogic/DestroyImage", 
         type: "POST" 
        }, 
        create: { 
         url: "ImageLogic/CreateImage", 
         type: "POST" 
        }, 
        thumbnailUrl: "ImageLogic/Thumbnail", 
        uploadUrl: "ImageLogic/UploadImage", 
        imageUrl: baseUrl + "Upload/Images/{0}" //baseUrl is your root url, for ex: http://yourwebsitename/Upload/Images/test.png 
       } 
      } 
     }) 

在我的控制器：

 private const string DefaultFilter = "*.png,*.gif,*.jpg,*.jpeg"; 
     private const int ThumbnailHeight = 80; 
     private const int ThumbnailWidth = 80; 
     private const string ImagePath = "Upload/Editor"; 

     private readonly DirectoryBrowser directoryBrowser; 
     private readonly ThumbnailCreator thumbnailCreator; 

     public ImageLogicController() 
     { 
      directoryBrowser = new DirectoryBrowser(); 
      thumbnailCreator = new ThumbnailCreator(); 
     } 

     [HttpPost] 
     public ActionResult ReadImage(string path) 
     { 
      try 
      { 
       string _path = string.IsNullOrEmpty(path) ? ("~/" + ImagePath) : ("~/" + ImagePath + "/" + path); 
       directoryBrowser.Server = Server; 

       var result = directoryBrowser 
        .GetContent(_path, DefaultFilter) 
        .Select(f => new 
        { 
         name = f.Name, 
         type = f.Type == EntryType.File ? "f" : "d", 
         size = f.Size 
        }); 

       return Json(result, JsonRequestBehavior.AllowGet); 
      } 
      catch (DirectoryNotFoundException) 
      { 
       throw new HttpException(404, "File Not Found"); 
      } 
     } 

     [AcceptVerbs(HttpVerbs.Post)] 
     public virtual ActionResult DestroyImage(string path, string name, string type) 
     { 
      if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(type)) 
      { 
       path = Path.Combine(Server.MapPath("~/" + ImagePath), name); 
       if (type.ToLowerInvariant() == "f") 
       { 
        DeleteFile(path); 
       } 
       else 
       { 
        DeleteDirectory(path); 
       } 

       return Json(null); 
      } 
      throw new HttpException(404, "File Not Found"); 
     } 

     protected virtual void DeleteFile(string path) 
     { 
      var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), path); 

      if (System.IO.File.Exists(physicalPath)) 
      { 
       System.IO.File.Delete(physicalPath); 
      } 
     } 

     protected virtual void DeleteDirectory(string path) 
     { 
      var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), path); 

      if (Directory.Exists(physicalPath)) 
      { 
       Directory.Delete(physicalPath, true); 
      } 
     } 

     [AcceptVerbs(HttpVerbs.Post)] 
     public virtual ActionResult CreateImage(string path, FileBrowserEntry entry) 
     { 
      var name = entry.Name; 

      if (!string.IsNullOrEmpty(name)) 
      { 
       var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), name); 

       if (!Directory.Exists(physicalPath)) 
       { 
        Directory.CreateDirectory(physicalPath); 
       } 

       return Json(null); 
      } 

      throw new HttpException(403, "Forbidden"); 
     } 

     [OutputCache(Duration = 3600, VaryByParam = "path")] 
     public virtual ActionResult Thumbnail(string path) 
     { 
      var imgPath = Path.Combine(Server.MapPath("~/" + ImagePath), path); 
      if (System.IO.File.Exists(imgPath)) 
      { 
       Response.AddFileDependency(imgPath); 
       return CreateThumbnail(imgPath); 
      } 
      throw new HttpException(404, "File Not Found"); 
     } 

     private FileContentResult CreateThumbnail(string physicalPath) 
     { 
      using (var fileStream = System.IO.File.OpenRead(physicalPath)) 
      { 
       var desiredSize = new ImageSize 
       { 
        Width = ThumbnailWidth, 
        Height = ThumbnailHeight 
       }; 

       const string contentType = "image/png"; 

       return File(thumbnailCreator.Create(fileStream, desiredSize, contentType), contentType); 
      } 
     } 

     [HttpPost] 
     public ActionResult UploadImage(string path, HttpPostedFileBase file) 
     { 
      var fileName = Path.GetFileName(file.FileName); 
      var oFileName = Path.GetFileNameWithoutExtension(file.FileName); 
      var extension = Path.GetExtension(file.FileName); 
      string temp = DateTime.UtcNow.Ticks.ToString(); 
      string newFileName = oFileName + "_" + temp + extension; 
      string _path = string.IsNullOrEmpty(path) ? ("~/" + ImagePath) : ("~/" + ImagePath + "/" + path); 
      var physPath = Path.Combine(Server.MapPath(_path), file.FileName); 
      file.SaveAs(physPath); 
      return Json(new { name = file.FileName, type = "f", size = file.ContentLength }); 
     } 

     [OutputCache(Duration = 360, VaryByParam = "path")] 
     public ActionResult Image(string path) 
     { 
      var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), path); 
      if (System.IO.File.Exists(physicalPath)) 
      { 
       const string contentType = "image/png"; 
       return File(System.IO.File.OpenRead(physicalPath), contentType); 
      } 
      throw new HttpException(403, "Forbidden"); 
     } 

我希望它幫你。謝謝。