不调用 Ajax 工具包文件上传
本文关键字:文件 工具包 调用 Ajax | 更新日期: 2023-09-27 18:35:18
我在同一页面上有两个 ajaxtoolkit 文件 ulopad,例如
<ajaxToolkit:AjaxFileUpload
id="AjaxFileUpload1"
AllowedFileTypes="jpg,jpeg,gif,png"
OnUploadComplete="ajaxUpload2_OnUploadComplete"
runat="server" />
<ajaxToolkit:AjaxFileUpload
id="ajaxUpload1"
AllowedFileTypes="jpg,jpeg,gif,png"
OnUploadComplete="ajaxUpload1_OnUploadComplete"
runat="server" />
和代码隐藏
protected void ajaxUpload2_OnUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string filePath = "~/Images/" + e.FileName;
filePath = filePath.Split('''').Last();
Session["img2"] = filePath.ToString();
AjaxFileUpload1.SaveAs(MapPath(filePath));
}
protected void ajaxUpload1_OnUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string filePath = "~/Images/" + e.FileName;
filePath = filePath.Split('''').Last();
Session["img1"] = filePath.ToString();
ajaxUpload1.SaveAs(MapPath(filePath));
}
问题是每当我使用上传 AjaxFileUpload1 时,它都可以工作并调用 void ajaxUpload2_OnUploadComplete方法,但如果我使用 ajaxUpload1,则会再次调用方法 ajaxUpload2_OnUploadComplete 但不调用方法 ajaxUpload1
为什么??
谢谢。
我们昨天遇到了同样的问题,我们发现您不能在同一页面上有多个 AjaxFileUpload 实例。
如果查看源代码,将会看到此控件使用常量 GUID 来标识其事件。由于 GUID 是一个常量,因此 AjaxFileUpload 的所有实例都使用相同的 GUID。
结果:
第一个实例吞下所有事件...
以下是操作中的 GUID:
private const string ContextKey = "{DA8BEDC8-B952-4d5d-8CC2-59FE922E2923}";
(...)
if (this.Page.Request.QueryString["contextkey"] == ContextKey && this.Page.Request.Files.Count > 0)
我们按如下方式自定义了 2012 年 9 月的工具包 - 希望这是一个临时解决方法,并且在将来的版本中修复此问题:
老
private const string ContextKey = "{DA8BEDC8-B952-4d5d-8CC2-59FE922E2923}";
新增功能
private string ContextKey = "";
老
public AjaxFileUpload()
: base(true, HtmlTextWriterTag.Div)
{
}
新增功能
public AjaxFileUpload()
: base(true, HtmlTextWriterTag.Div)
{
if (HttpContext.Current.Items["lastAjaxFileUploadContextKey"] == null)
{
HttpContext.Current.Items["lastAjaxFileUploadContextKey"] = 1;
}
else
{
HttpContext.Current.Items["lastAjaxFileUploadContextKey"] = (int)HttpContext.Current.Items["lastAjaxFileUploadContextKey"] + 1;
}
ContextKey = HttpContext.Current.Items["lastAjaxFileUploadContextKey"].ToString();
}
实际上有一种方法可以在单个页面上使用多个 AjaxFileUpload 控件,每个控件都会触发自己的事件。 解决方案非常简单;它涉及重写 AjaxFileUpload 控件的 Microsoft 客户端函数之一,以注入有关实际导致上载完成事件的控件的信息,然后将所有 AjaxFileUpload 控件的单个事件处理程序用作"切换板",随后将为创建事件服务器端的控件触发正确的事件处理程序。
具体操作方法如下:
将此脚本块添加到页面的 head 元素之后的某个位置。 如果您使用的是母版页,请将以下内容放在 HTML 内容的占位符中:
<script type="text/javascript">
Sys.Extended.UI.AjaxFileUpload.Control.prototype.doneAndUploadNextFile = function (c) {
var a = new XMLHttpRequest, b = this;
a.open("POST", "?contextKey=" + this._contextKey + "&done=1&guid=" + c._id + "&uplCtrlID=" + b.get_id(), true);
a.onreadystatechange = function () {
if (a.readyState == 4) if (a.status == 200) {
b.raiseUploadComplete(Sys.Serialization.JavaScriptSerializer.deserialize(a.responseText));
b._processor.startUpload()
}
else {
b.setFileStatus(c, "error", Sys.Extended.UI.Resources.AjaxFileUpload_error);
b.raiseUploadError(a);
throw "error raising upload complete event and start new upload";
}
};
a.send(null);
}
</script>
此代码与用于调用页面并触发 UploadComplete 事件的函数相同,只是修改为添加额外的参数 - uplCtrlID - 该参数将包含真正导致事件的控件的 ID。
按如下方式设置服务器端代码:
//set the OnUploadComplete property on all of your AjaxFileUpload controls to this method
protected void anyUploader_UploadComplete(object sender, AjaxFileUploadEventArgs e)
{
//call the correct upload complete handler if possible
if (Request.QueryString["uplCtrlID"] != null)
{
//uplCtrlID (the query string param we injected with the overriden JS function)
//contains the ID of the uploader.
//We'll use that to fire the appropriate event handler...
if (Request.QueryString["uplCtrlID"] == FileUploaderA.ClientID)
FileUploaderA_UploadComplete(FileUploaderA, e);
else if (Request.QueryString["uplCtrlID"] == FileUploaderB.ClientID)
FileUploaderB_UploadComplete(FileUploaderB, e);
//etc (or use a switch block - whatever suits you)
}
}
protected void FileUploaderA_UploadComplete(AjaxFileUpload sender, AjaxFileUploadEventArgs e)
{
//logic here
}
protected void FileUploaderB_UploadComplete(AjaxFileUpload sender, AjaxFileUploadEventArgs e)
{
//logic here
}
一切就绪。 同一页面上有多个 AjaxFileUpload 控件,没有问题。