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

您尚未提供有关图像浏览器配置的任何详细信息，但您必须检查＆＃34; imageBrowser＆＃34;的配置。＆＃34; kendoEditor＆＃34;的财产jquery对象初始化，如第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请求，如上例所示＆＃34 ; ImageBrowser的/读取＆＃34;并且这个api需要返回所有图像名称的数组，其大小为json数组格式：

[{＆＃34; name＆＃34;：＆＃34; foo＆＃34;，＆＃34; type＆＃34;：＆＃34; d＆＃34; }，{＆＃34; name＆＃34;：＆＃34; bar.png＆＃34;，＆＃34; type＆＃34;：＆＃34; f＆＃34;，＆＃34; size＆＃34;： 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控制器在这里。

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

kendo ui imagebrowser默认图像文件夹

3 个答案: