2015-12-08 7 views
6

このコードを使用して画像ブラウザを作成しました。 http://www.telerik.com/forums/imagebrowser-with-images-from-database剣道イメージブラウザデフォルト画像フォルダ

どこからフォルダイメージを取得できないのですか? ここに画像のデフォルトフォルダがあるContent:\ kendo \ 2013.2.716 \ Defaultが見つかりましたが、どこで使用されているのか見つからないのですか?

本当に私の問題かどうかはわかりません。 enter image description here

できるだけ読み込みを続け、フォルダイメージは表示されません。

私は上のリンクの例のコードに従いました。これが私の結末です。フォルダを追加すると、フォルダがデータベースに追加され、画像も追加されます。

画像を追加するとサムネイルとファイル名が表示されますが、ページをリロードすると、フォルダと同じ結果になります。ここで

enter image description here

それはファイルを読んだとき、私が呼び出すコードは次のとおりです。

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

これはそれが enter image description here enter image description here

を返されるようにフォルダ/画像が見えるものである私は推測しますそれはファイルサイズと関係がありますか?

+0

kendo-uiがさまざまな言語をサポートしているため、コードを統合する言語を教えてください。純粋なphpまたはhtml5とjavascriptがサーバ側言語と一緒に使用されています。 –

答えて

1

イメージブラウザの設定について詳しくは説明していませんが、Image Browser Configurationで説明されている "kendoEditor" jqueryオブジェクトの初期化の "imageBrowser"プロパティの設定を確認する必要があります。 Jqueryコードは以下の例のようになります。 imageBrowser.transportあたりとimageBrowser.transport.read構成として

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

、私は、エディタでImage Browserのアイコンをユーザーがクリックは、それが上記の例のとおりとして読み取るプロパティに設定されているパスにAJAX要求を行うときだと思うその「ImageBrowserの読み取り/」と、このapiは、以下のjson配列形式のサイズを持つすべてのイメージ名の配列を返す必要があります:

[{"name": "type": "d"}、{"name": "bar.png" 、 "type": "f"、 "size":15289}]

設定を確認し、APIを正しく設定して正しく動作するようにします。

0

ここに私のコード:

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

私はそれはあなたを助ける願っています。ありがとう。

関連する問題