2015-12-08 19 views
6

Ho usato questo codice per provare a produrre un browser di immagini. http://www.telerik.com/forums/imagebrowser-with-images-from-databasekendo ui imagebrowser cartella immagine predefinita

Non capisco da dove viene l'immagine della cartella? Ho trovato un'immagine con la cartella predefinita sull'immagine qui: Contenuto \ kendo \ 2013.2.716 \ Default ma non riesco a trovare dove o se mai la usa.

Non so se questo sia davvero il mio problema. enter image description here

Come si può vedere, continua a caricare e l'immagine della cartella non viene mai visualizzata.

Ho seguito il codice nell'esempio nel collegamento sopra e questo è quello che ho trovato. Quando aggiungo una cartella, aggiunge la cartella al database e aggiunge anche le immagini.

Quando aggiungo un'immagine mostra la miniatura e il nome del file come previsto, ma quando ricarico la pagina mi ritrovo con lo stesso risultato della cartella.

enter image description here

Ecco il codice che io chiamo quando leggere i file:

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

questo è ciò che la cartella/immagine sembra che ottiene rinviato enter image description here enter image description here

immagino potrebbe avere qualcosa a che fare con il filesize?

+0

Si prega di fornire la lingua in cui si sta integrando il codice poiché kendo-ui supporta varie lingue. Sia puramente php o html5 e javascript con la lingua lato server, così posso aiutare di conseguenza. –

risposta

1

Non sono stati forniti dettagli sulla configurazione del browser immagine, ma è necessario verificare la configurazione per la proprietà "imageBrowser" dell'inizializzazione dell'oggetto jquery "kendoEditor" come spiegato a pagina Image Browser Configuration. Il codice Jquery è il seguente come nell'esempio.

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

Come per imageBrowser.transport e la configurazione imageBrowser.transport.read, penso che quando l'utente clicca sull'icona Image Browser in editor di fa richiesta AJAX al percorso che si trova in proprietà di lettura come di cui al precedente esempio la sua "ImageBrowser/leggere" e questo api è necessario restituire la matrice di tutte le immagini nome con la dimensione sotto il formato json array:

[{"nome": "foo", "tipo": "d"}, {"nome": "bar.png" , "type": "f", "size": 15289}]

Quindi controlla la configurazione e imposta correttamente l'API per farlo funzionare.

0

Ecco il mio codice:

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

E nel mio Controller:

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

Spero che ti aiuta. Grazie.