2015-12-08 7 views
6

मैंने एक छवि ब्राउज़र बनाने की कोशिश करने के लिए इस कोड का उपयोग किया है। http://www.telerik.com/forums/imagebrowser-with-images-from-databasekendo ui imagebrowser डिफ़ॉल्ट छवि फ़ोल्डर

मुझे यह नहीं पता कि यह फ़ोल्डर छवि कहां से प्राप्त करता है? मुझे यहां छवि पर डिफ़ॉल्ट फ़ोल्डर वाला एक चित्र मिला: सामग्री \ kendo \ 2013.2.716 \ डिफ़ॉल्ट लेकिन मुझे नहीं पता कि यह कहां या कभी इसका उपयोग करता है।

मुझे नहीं पता कि यह वास्तविकता मेरी समस्या है या नहीं। 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

मुझे लगता है कि वापस आ जाता है की तरह लग रहा है:

enter image description here

यहाँ जब यह फ़ाइलों को पढ़ने के कोड मैं फोन है यह फाइलसाइज के साथ कुछ करने के लिए हो सकता है?

+0

कृपया उस भाषा को दें जिसमें आप कोड को एकीकृत कर रहे हैं क्योंकि केंडो-यूई विभिन्न भाषाओं का समर्थन करता है। चाहे यह सर्वर की भाषा के साथ शुद्ध PHP या html5 और जावास्क्रिप्ट है, इसलिए मैं तदनुसार सहायता कर सकता हूं। –

उत्तर

1

आपने अपनी छवि ब्राउज़र कॉन्फ़िगरेशन के बारे में कोई विवरण नहीं दिया है, लेकिन आपको पृष्ठ Image Browser Configuration पर बताए गए अनुसार "केंडोएडिटर" jquery ऑब्जेक्ट प्रारंभिकरण की "imageBrowser" प्रॉपर्टी के लिए अपनी कॉन्फ़िगरेशन जांचनी होगी। उदाहरण के अनुसार 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 विन्यास के रूप में, मुझे लगता है कि जब संपादक में छवि ब्राउज़र आइकन पर उपयोगकर्ता क्लिक यह जो के रूप में उपरोक्त उदाहरण के अनुसार अपने 'imagebrowser/पढ़ें "और यह पढ़ संपत्ति में सेट कर दिया जाता पथ के लिए ajax अनुरोध करता है एपीआई को नीचे जेसन सरणी प्रारूप में आकार के साथ सभी छवियों के नाम की सरणी वापस करने की आवश्यकता है:

[{"name": "foo", "type": "d"}, {"name": "bar.png" , "टाइप": "एफ", "आकार": 1528 9}]

तो अपनी कॉन्फ़िगरेशन जांचें और इसे कार्य करने के लिए अपने एपीआई को सही तरीके से सेट करें।

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

मुझे आशा है कि यह आपकी मदद कर। धन्यवाद।

संबंधित मुद्दे