我正在使用版本为 2013.1.220.40 的 Telerik RadImageEditor 控件，控件放在页面上，页面显示在 RadWindow 中。我想要的只是传递一个 url 或不传递（分别用于更新和添加场景），当用户单击图像编辑器中的保存按钮时，在弹出窗口中裁剪图像后，我想将路径发送回页面通过将响应脚本添加到 Ajax 管理器。所有的东西都工作正常，但响应脚本不起作用。我试图在 onSaving 事件中放置一个隐藏字段来保存值，然后捕获图像编辑器的 onClientSaved 事件，但隐藏字段的值总是返回空。离开 onSaving 事件后，似乎所有值都重置了。而图像已成功保存在目录中。我不知道导致此错误的缺少什么。
这是服务器端代码。
public void RadImageEditor1_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs e)
{
string filename = e.FileName;
//If Derectory not exist, creat new
if (!Directory.Exists(Server.MapPath(ConfigurationManager.AppSettings["TempImagePath"])))
Directory.CreateDirectory(Server.MapPath(ConfigurationManager.AppSettings["TempImagePath"]));
//Set Image Path
Path = ConfigurationManager.AppSettings["TempImagePath"] + "/" + filename.Trim() + Extention;
if (File.Exists(Path))
File.Delete(Path);
//Save image to temp directory
e.Image.Image.Save(Server.MapPath(Path));
//Send image path back to the page where this popup Appeared
RadAjaxManager1.ResponseScripts.Add("CloseAndSendPath('" + Path +"')");
//ClientScript.RegisterStartupScript(this.Page.GetType(), "CloseAndRebind", "<script>CloseAndRebind('" + Path + "');</script>");
//Cancel built in Saving.
e.Cancel = true;
}
public string Path
{
get
{
if (ViewState["Path"] == null)
return string.Empty;
else
return ViewState["Path"].ToString();
}
set
{
ViewState["Path"] = value;
}
}
public string Extention
{
get
{
if (ViewState["Extention"] == null)
return string.Empty;
else
return ViewState["Extention"].ToString();
}
set
{
ViewState["Extention"] = value;
}
}
public void BtnDeleteClick(object sender, EventArgs e)
{
Context.Cache.Remove(Session.SessionID + "UploadedFile");
Path = string.Empty;
Extention = string.Empty;
imgUploaded.ImageUrl = string.Empty;
}
public void BtnCropClick(object sender, EventArgs e)
{
panelCrop.Visible = panelUpload.Visible;
panelUpload.Visible = !panelCrop.Visible;
}
public void BtnUploadClick(object sender, EventArgs e)
{
imgUploaded.ImageUrl = Path;
}
public void RadAsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
{
//Clear changes and remove uploaded image from Cache
RadImageEditor1.ResetChanges();
Context.Cache.Remove(Session.SessionID + "UploadedFile");
using (Stream stream = e.File.InputStream)
{
byte[] imgData = new byte[stream.Length];
stream.Read(imgData, 0, imgData.Length);
MemoryStream ms = new MemoryStream();
ms.Write(imgData, 0, imgData.Length);
Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero);
}
//Save to Temp Folder as well
string fileExt = e.File.GetExtension().ToLower();
if (fileExt != ".jpg" && fileExt != ".png" && fileExt != ".jpeg" && fileExt != ".bmp" && fileExt != ".gif")
{
lblError.Text = "Please upload photo only in .jpg, .jpeg, .png, .bmp or .gif format";
return;
}
string filename = e.File.FileName;
Extention = fileExt;
if (!Directory.Exists(Server.MapPath(ConfigurationManager.AppSettings["TempImagePath"])))
Directory.CreateDirectory(Server.MapPath(ConfigurationManager.AppSettings["TempImagePath"]));
Path = ConfigurationManager.AppSettings["TempImagePath"] + "/" + filename.Trim();
e.File.SaveAs(Server.MapPath(Path));
}
public void RadImageEditor1_ImageLoading(object sender, Telerik.Web.UI.ImageEditorLoadingEventArgs e)
{
//Handle Uploaded images
if (!Object.Equals(Context.Cache.Get(Session.SessionID + "UploadedFile"), null))
{
using (EditableImage image = new EditableImage((MemoryStream)Context.Cache.Get(Session.SessionID + "UploadedFile")))
{
e.Image = image.Clone();
e.Cancel = true;
}
}
}
protected void Page_Init(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (!string.IsNullOrEmpty(Request.QueryString["usertype"]))
{
string usertype = Request.QueryString["usertype"];
switch (usertype)
{
case "employee":
case "customer":
RadImageEditor1.ExternalDialogsPath = "~/Controls/Crop/Employee/ImageEditorDialogs";
break;
case "company":
RadImageEditor1.ExternalDialogsPath = "~/Controls/Crop/Company/ImageEditorDialogs";
break;
}
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Context.Cache.Remove(Session.SessionID + "UploadedFile");
if (!string.IsNullOrEmpty(Request.QueryString["path"]))
{
Path = Request.QueryString["path"];
imgUploaded.ImageUrl = Path;
System.IO.FileInfo file = new FileInfo(Path);
if (file != null)
{
Extention = file.Extension;
using (FileStream stream = new FileStream(Server.MapPath(Path), FileMode.Open))
{
byte[] imgData = new byte[stream.Length];
stream.Read(imgData, 0, imgData.Length);
MemoryStream ms = new MemoryStream();
ms.Write(imgData, 0, imgData.Length);
Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero);
}
}
}
}
}
这是带有java脚本的标记
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
</asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxLoadingPanel ID="loadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" LoadingPanelID="loadingPanel1">
<AjaxSettings>
</AjaxSettings>
</telerik:RadAjaxManager>
<asp:Panel ID="panelUpload" runat="server" DefaultButton="btnUpload">
<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnFileUploaded="RadAsyncUpload1_FileUploaded"
MaxFileSize="5242880" OnClientValidationFailed="validationFailed" AllowedFileExtensions="jpg,png,gif,bmp"
AutoAddFileInputs="false" OnClientFileUploadRemoved="fileRemoved" MaxFileInputsCount="1"
HideFileInput="true" Localization-Select="Browse">
</telerik:RadAsyncUpload>
<asp:Label ID="lblError" runat="server" ForeColor="Red" ViewStateMode="Disabled"></asp:Label>
<asp:Panel ID="PanelButtons" runat="server">
<asp:Button ID="btnUpload" Text="Upload Image" runat="server" CausesValidation="False"
OnClick="BtnUploadClick"></asp:Button>
<asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="BtnCropClick" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="BtnDeleteClick" />
<asp:Image ID="imgUploaded" runat="server" Width="150px" Height="150px" />
</asp:Panel>
</asp:Panel>
<asp:Panel ID="panelCrop" runat="server" Visible="false">
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" Width="750px" Height="480px"
ToolsFile="~/Utilities/Tools/ImageUploadToolsFile.xml" OnImageLoading="RadImageEditor1_ImageLoading"
OnImageSaving="RadImageEditor1_ImageSaving" OnClientLoad="ImageEditorLoad">
<Tools>
<telerik:ImageEditorToolGroup>
<telerik:ImageEditorTool Text="SaveImage" CommandName="SaveImage" ImageUrl="~/images/toolBarSprite.png" />
</telerik:ImageEditorToolGroup>
</Tools>
</telerik:RadImageEditor>
</asp:Panel>
<telerik:RadScriptBlock ID="RadScriptBlock" runat="server">
<script type="text/javascript">
function validationFailed(sender, eventArgs) {
$telerik.$("#asyncUpload").html("Validation failed for '" + eventArgs.get_fileName() + "'.").fadeIn("slow");
}
function fileRemoved(sender, eventArgs) {
$telerik.$("#asyncUpload").html('').fadeOut("slow");
}
function waitForCommand(imageEditor, commandName, callback) {
var timer = setInterval(function () {
var widget = imageEditor.get_currentToolWidget();
if (widget && widget.get_name() == commandName) {
clearInterval(timer);
callback(widget);
}
}, 100);
}
Telerik.Web.UI.ImageEditor.CommandList["SaveImage"] = function (imageEditor, commandName, args) {
var dt = new Date();
var year = dt.getFullYear();
var month = dt.getMonth();
var day = dt.getDate(); var hour = dt.getHours();
var min = dt.getMinutes();
var newdate = year + "-" + month + "-" + day + " " + hour + "-" + min;
imageEditor.saveImageOnServer(newdate, true); //saves the image on the server - it either overwrites the file or keeps both files
};
function ImageEditorLoad(imgEditor, args) {
//open the Crop tool dialog with a little timeout
setTimeout(function () {
imgEditor.fire("Crop");
}, 0);
}
function CloseAndSendPath(arg) {
GetRadWindow().BrowserWindow.UpdateImageUrl(arg);//a method from page where this popup appeared
GetRadWindow().close();
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)
return oWindow;
}
</script>
</telerik:RadScriptBlock>
</form>