فعال سازی قسمت آپلود تصویر و فایل Kendo UI Editor
نویسنده: وحید نصیری
تاریخ: ۱۳۹۴/۰۱/۲۱ ۱۶:۲۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
<!--نحوهی راست به چپ سازی -->
<div class="k-rtl">
<textarea id="editor" rows="10" cols="30" style="height: 440px"></textarea>
</div>
@section JavaScript
{
<script type="text/javascript">
$(function () {
$("#editor").kendoEditor({
tools: [
"bold", "italic", "underline", "strikethrough", "justifyLeft",
"justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList",
"insertOrderedList", "indent", "outdent", "createLink", "unlink",
"insertImage", "insertFile",
"subscript", "superscript", "createTable", "addRowAbove", "addRowBelow",
"addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "viewHtml",
"formatting", "cleanFormatting", "fontName", "fontSize", "foreColor",
"backColor", "print"
],
imageBrowser: {
messages: {
dropFilesHere: "فایلهای خود را به اینجا کشیده و رها کنید"
},
transport: {
read: {
url: "@Url.Action("GetFilesList", "KendoEditorImages")",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET',
cache: false
},
destroy: {
url: "@Url.Action("DestroyFile", "KendoEditorImages")",
type: "POST"
},
create: {
url: "@Url.Action("CreateFolder", "KendoEditorImages")",
type: "POST"
},
thumbnailUrl: "@Url.Action("GetThumbnail", "KendoEditorImages")",
uploadUrl: "@Url.Action("UploadFile", "KendoEditorImages")",
imageUrl: "@Url.Action("GetFile", "KendoEditorImages")?path={0}"
}
},
fileBrowser: {
messages: {
dropFilesHere: "فایلهای خود را به اینجا کشیده و رها کنید"
},
transport: {
read: {
url: "@Url.Action("GetFilesList", "KendoEditorFiles")",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET',
cache: false
},
destroy: {
url: "@Url.Action("DestroyFile", "KendoEditorFiles")",
type: "POST"
},
create: {
url: "@Url.Action("CreateFolder", "KendoEditorFiles")",
type: "POST"
},
uploadUrl: "@Url.Action("UploadFile", "KendoEditorFiles")",
fileUrl: "@Url.Action("GetFile", "KendoEditorFiles")?path={0}"
}
}
});
});
</script>
}
imageBrowser: {
transport: {
read: {
url: "@Url.Action("GetFilesList", "KendoEditorImages")",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET',
cache: false
}
}
}, namespace KendoUI13.Controllers
{
public class KendoEditorFilesController : Controller
{
//مسیر پوشه فایلها
protected string FilesFolder = "~/files";
protected string KendoFileType = "f";
protected string KendoDirType = "d";
[HttpGet]
public ActionResult GetFilesList(string path)
{
path = GetSafeDirPath(path);
var imagesList = new DirectoryInfo(path)
.GetFiles()
.Select(fileInfo => new KendoFile
{
Name = fileInfo.Name,
Size = fileInfo.Length,
Type = KendoFileType
}).ToList();
var foldersList = new DirectoryInfo(path)
.GetDirectories()
.Select(directoryInfo => new KendoFile
{
Name = directoryInfo.Name,
Type = KendoDirType
}).ToList();
return new ContentResult
{
Content = JsonConvert.SerializeObject(imagesList.Union(foldersList), new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
}
protected string GetSafeDirPath(string path)
{
// path = مسیر زیر پوشهی وارد شده
if (string.IsNullOrWhiteSpace(path))
{
return Server.MapPath(FilesFolder);
}
//تمیز سازی امنیتی
path = Path.GetDirectoryName(path);
path = Path.Combine(Server.MapPath(FilesFolder), path);
return path;
}
}
} namespace KendoUI13.Models
{
public class KendoFile
{
public string Name { set; get; }
public string Type { set; get; }
public long Size { set; get; }
}
} imageBrowser: {
transport: {
destroy: {
url: "@Url.Action("DestroyFile", "KendoEditorImages")",
type: "POST"
}
}
}, namespace KendoUI13.Controllers
{
public class KendoEditorFilesController : Controller
{
//مسیر پوشه فایلها
protected string FilesFolder = "~/files";
protected string KendoFileType = "f";
protected string KendoDirType = "d";
[HttpPost]
public ActionResult DestroyFile(string name, string path)
{
//تمیز سازی امنیتی
name = Path.GetFileName(name);
path = GetSafeDirPath(path);
var pathToDelete = Path.Combine(path, name);
var attr = System.IO.File.GetAttributes(pathToDelete);
if ((attr & FileAttributes.Directory) == FileAttributes.Directory)
{
Directory.Delete(pathToDelete, recursive: true);
}
else
{
System.IO.File.Delete(pathToDelete);
}
return Json(new object[0]);
}
}
} imageBrowser: {
transport: {
create: {
url: "@Url.Action("CreateFolder", "KendoEditorImages")",
type: "POST"
}
}
}, namespace KendoUI13.Controllers
{
public class KendoEditorFilesController : Controller
{
//مسیر پوشه فایلها
protected string FilesFolder = "~/files";
protected string KendoFileType = "f";
protected string KendoDirType = "d";
[HttpPost]
public ActionResult CreateFolder(string name, string path)
{
//تمیز سازی امنیتی
name = Path.GetFileName(name);
path = GetSafeDirPath(path);
var dirToCreate = Path.Combine(path, name);
Directory.CreateDirectory(dirToCreate);
return KendoFile(new KendoFile
{
Name = name,
Type = KendoDirType
});
}
protected ActionResult KendoFile(KendoFile file)
{
return new ContentResult
{
Content = JsonConvert.SerializeObject(file,
new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
}
}
} imageBrowser: {
transport: {
thumbnailUrl: "@Url.Action("GetThumbnail", "KendoEditorImages")",
uploadUrl: "@Url.Action("UploadFile", "KendoEditorImages")",
imageUrl: "@Url.Action("GetFile", "KendoEditorImages")?path={0}"
}
}, namespace KendoUI13.Controllers
{
public class KendoEditorFilesController : Controller
{
//مسیر پوشه فایلها
protected string FilesFolder = "~/files";
protected string KendoFileType = "f";
protected string KendoDirType = "d";
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file, string path)
{
//تمیز سازی امنیتی
var name = Path.GetFileName(file.FileName);
path = GetSafeDirPath(path);
var pathToSave = Path.Combine(path, name);
file.SaveAs(pathToSave);
return KendoFile(new KendoFile
{
Name = name,
Size = file.ContentLength,
Type = KendoFileType
});
}
}
} using System.Web.Mvc;
namespace KendoUI13.Controllers
{
public class KendoEditorImagesController : KendoEditorFilesController
{
public KendoEditorImagesController()
{
// بازنویسی مسیر پوشهی فایلها
FilesFolder = "~/images";
}
[HttpGet]
[OutputCache(Duration = 3600, VaryByParam = "path")]
public ActionResult GetThumbnail(string path)
{
//todo: create thumb/ resize image
path = GetSafeFileAndDirPath(path);
return File(path, "image/png");
}
}
} [HttpGet]
public ActionResult GetFile(string path)
{
path = GetSafeFileAndDirPath(path);
return File(path, "image/png");
} <div id="imgBrowser"></div>
$("#imgBrowser").kendoImageBrowser({
transport: {
read: "/service/ImageBrowser/Read",
destroy: {
url: "/service/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "/service/ImageBrowser/Create",
type: "POST"
},
thumbnailUrl: "/service/ImageBrowser/Thumbnail",
uploadUrl: "/service/ImageBrowser/Upload",
imageUrl: "/service/ImageBrowser/Image?path={0}"
}
}); public class ImageSize
{
public int Height
{
get;
set;
}
public int Width
{
get;
set;
}
} public class ImageResizer
{
public ImageSize Resize(ImageSize originalSize, ImageSize targetSize)
{
var aspectRatio = (float)originalSize.Width / (float)originalSize.Height;
var width = targetSize.Width;
var height = targetSize.Height;
if (originalSize.Width > targetSize.Width || originalSize.Height > targetSize.Height)
{
if (aspectRatio > 1)
{
height = (int)(targetSize.Height / aspectRatio);
}
else
{
width = (int)(targetSize.Width * aspectRatio);
}
}
else
{
width = originalSize.Width;
height = originalSize.Height;
}
return new ImageSize
{
Width = Math.Max(width, 1),
Height = Math.Max(height, 1)
};
}
} public class ThumbnailCreator
{
private static readonly IDictionary<string, ImageFormat> ImageFormats = new Dictionary<string, ImageFormat>{
{"image/png", ImageFormat.Png},
{"image/gif", ImageFormat.Gif},
{"image/jpeg", ImageFormat.Jpeg}
};
private readonly ImageResizer resizer;
public ThumbnailCreator()
{
this.resizer = new ImageResizer();
}
public byte[] Create(Stream source, ImageSize desiredSize, string contentType)
{
using (var image = Image.FromStream(source))
{
var originalSize = new ImageSize
{
Height = image.Height,
Width = image.Width
};
var size = resizer.Resize(originalSize, desiredSize);
using (var thumbnail = new Bitmap(size.Width, size.Height))
{
ScaleImage(image, thumbnail);
using (var memoryStream = new MemoryStream())
{
thumbnail.Save(memoryStream, ImageFormats[contentType]);
return memoryStream.ToArray();
}
}
}
}
private void ScaleImage(Image source, Image destination)
{
using (var graphics = Graphics.FromImage(destination))
{
graphics.CompositingMode = CompositingMode.SourceCopy;
graphics.CompositingQuality = CompositingQuality.HighQuality;
graphics.SmoothingMode = SmoothingMode.AntiAlias;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.DrawImage(source, 0, 0, destination.Width, destination.Height);
}
}
} private FileContentResult CreateThumbnail(string physicalPath)
{
using (var fileStream = System.IO.File.OpenRead(physicalPath))
{
var desiredSize = new ImageSize
{
Width = ThumbnailWidth,
Height = ThumbnailHeight
};
string contentType = MimeMapping.GetMimeMapping(physicalPath);
return File(thumbnailCreator.Create(fileStream, desiredSize, contentType), contentType);
}
} public virtual ActionResult GetThumbnail(string path)
{
path = GetSafeFileAndDirPath(path);
// return File(path, contentType);
return CreateThumbnail(path);
}