ASP.NET中AjaxFileUpload上传完成后如何执行客户端代码？

问题描述 #

我有一个ASP.NET WebForms应用，使用ajaxFileUpload控件上传文件并通过邮件发送。业务要求每封邮件最多上传5个文件，达到限制时需要禁用文件选择器。由于文件选择期间会临时存储，我希望在服务器端的OnUploadComplete事件中，当上传文件数量达到5个时，在客户端禁用选择器。

尝试了以下方法均无效：

• 使用ClientScript.RegisterStartupScript注册隐藏选择器的脚本，未触发
• 使用ScriptManager.RegisterStartupScript注册脚本，即使传入UpdatePanel参数也无效果
• 尝试通过隐藏字段调用LoadPostData()，触发Invalid postback or callback argument异常

当前OnUploadComplete事件代码：

protected void ajaxCargarAdjunto_UploadComplete(object sender, AjaxFileUploadEventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "files", "$(\"#ajaxCargarAdjunto_SelectFileContainer\")[0].style.display = \"none\"", false);
}

解决方案 #

1. 修正脚本注册的语法与参数错误 #

你当前的脚本字符串存在引号嵌套问题，且未正确启用自动添加脚本标签，导致脚本无法执行。修改为以下代码：

ScriptManager.RegisterStartupScript(this, this.GetType(), "disableUploadSelector", "$('#ajaxCargarAdjunto_SelectFileContainer').hide();", true);

• 将addScriptTags参数设为true，框架会自动包裹<script>标签，无需手动拼接
• 使用jQuery的.hide()方法替代原生DOM样式操作，兼容性更好
• 确保选择器的ID与控件生成的实际客户端ID一致（可通过浏览器F12查看元素ID确认）

2. 准确统计已上传文件数量 #

在服务器端事件中先统计已成功上传的文件数，达到阈值时再执行禁用逻辑：

protected void ajaxCargarAdjunto_UploadComplete(object sender, AjaxFileUploadEventArgs e)
{
    // 用Session存储当前会话的已上传文件数
    int uploadedCount = Session["UploadedFileCount"] != null ? (int)Session["UploadedFileCount"] : 0;
    uploadedCount++;
    Session["UploadedFileCount"] = uploadedCount;

    if (uploadedCount >= 5)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "disableUpload", "$('#ajaxCargarAdjunto_SelectFileContainer').hide();", true);
    }
}

3. 避免手动调用LoadPostData() #

直接调用IPostBackDataHandler.LoadPostData()会违反WebForms的回发验证机制，引发参数异常。所有UI状态更新都应通过ScriptManager注册客户端脚本实现，不要手动干预回发数据流程。

4. 备选：客户端事件辅助控制 #

如果服务器端脚本仍未生效，可结合ajaxFileUpload的客户端事件实时监控上传数量：

// 页面添加客户端脚本
function onUploadComplete(sender, args) {
    // 获取已上传文件总数
    var totalUploaded = sender.get_uploadedFilesCount();
    if (totalUploaded >= 5) {
        $('#ajaxCargarAdjunto_SelectFileContainer').hide();
    }
}

在ASPX页面的控件上绑定该客户端事件：

<ajaxToolkit:AjaxFileUpload 
    ID="ajaxCargarAdjunto" 
    runat="server" 
    OnUploadComplete="ajaxCargarAdjunto_UploadComplete"
    OnClientUploadComplete="onUploadComplete" />

内容的提问来源于stack exchange，提问作者George1917