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

我希望它帮你。谢谢。