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/read”和这个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");
        }

希望对你有帮助。谢谢。

Answer 3

用于“Kendo ImageBrowser”的 Asp.net MVC ImageBrowser Controller 在这里。

private const string DefaultFilter = "*.png,*.gif,*.jpg,*.jpeg";
    private const int ThumbnailHeight = 80;
    private const int ThumbnailWidth = 80;
    private string ImagePath = "/JalalImage/"; //Base Image Directory

    private readonly DirectoryBrowser directoryBrowser;
    private readonly ThumbnailCreator thumbnailCreator;

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

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

            var result = directoryBrowser.GetDirectories(_path)
                .Concat(directoryBrowser.GetFiles(_path, DefaultFilter));

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

    [AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult Destroy(string path, string name, FileBrowserEntryType EntryType)
    {
        if (!string.IsNullOrEmpty(name))
        {
            path = Path.Combine(Server.MapPath(ImagePath + path), name);
            if (EntryType == FileBrowserEntryType.File)
            {
                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 Create(string path, FileBrowserEntry entry)
    {
        var name = entry.Name;

        if (!string.IsNullOrEmpty(name))
        {
            var physicalPath = Path.Combine(Server.MapPath(ImagePath + path), 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 Upload(string path, HttpPostedFileBase file)
    {
        var fileName = Path.GetFileName(file.FileName);
        var oFileName = Path.GetFileNameWithoutExtension(file.FileName);
        var extension = Path.GetExtension(file.FileName);
        var temp = DateTime.UtcNow.Ticks.ToString();
        var newFileName = oFileName + "_" + temp + extension;
        var _path = string.IsNullOrEmpty(path) ? (ImagePath) : (ImagePath + "/" + path);
        var physPath = Path.Combine(Server.MapPath(_path), file.FileName);
        file.SaveAs(physPath);

        return Json(new FileBrowserEntry
        {
            Name = file.FileName,
            EntryType = FileBrowserEntryType.File,
            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");
    }