AjaxControlToolkit AsyncFileUpload：通过JavaScript获取上传文件路径

AsyncFileUpload上传完成后，客户端无法直接获取服务器端的文件路径——因为文件是异步上传到服务器的，客户端不知道服务器最终保存的位置，必须通过服务器端返回路径信息给客户端，再用JavaScript设置Image控件的src。

步骤1：修改ASPX页面代码 #

给AsyncFileUpload添加服务器端上传完成事件，同时调整客户端JavaScript逻辑：

<asp:Image ID="imgCategory" runat="server" Height="225px" Width="300px" />
<ajaxToolkit:AsyncFileUpload ID="ajxAsyncFileUpload" runat="server" 
    OnClientUploadComplete="UploadComplete"
    OnUploadedComplete="ajxAsyncFileUpload_UploadedComplete" />

<script type="text/javascript">
    function UploadComplete(sender, args) {
        // 从服务器返回的参数中获取文件名
        var fileName = args.get_fileName();
        // 拼接服务器上传目录的相对路径（根据你的实际目录调整）
        var fullImagePath = '<%= ResolveUrl("~/Uploads/") %>' + fileName;
        // 设置Image控件的src属性
        document.getElementById('<%= imgCategory.ClientID %>').src = fullImagePath;
    }
</script>

步骤2：添加服务器端VB.NET处理代码 #

在Web窗体的代码文件（.aspx.vb）中实现OnUploadedComplete事件，负责保存文件并确保文件名能传递给客户端：

Imports System.IO

Protected Sub ajxAsyncFileUpload_UploadedComplete(sender As Object, e As AjaxControlToolkit.AsyncFileUploadEventArgs)
    ' 定义服务器端的上传目录（根目录下的Uploads文件夹）
    Dim uploadDirectory As String = Server.MapPath("~/Uploads/")
    
    ' 如果目录不存在则创建
    If Not Directory.Exists(uploadDirectory) Then
        Directory.CreateDirectory(uploadDirectory)
    End If
    
    ' 获取上传文件的原始文件名（可选：添加时间戳避免重名）
    Dim targetFileName As String = Path.GetFileName(e.FileName)
    ' 可选：重命名文件防止重复
    ' targetFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "_" + targetFileName
    
    ' 保存文件到服务器目录
    ajxAsyncFileUpload.SaveAs(Path.Combine(uploadDirectory, targetFileName))
    
    ' AsyncFileUpload会自动将e.FileName（或你修改后的targetFileName）传递给客户端的args对象
    ' 如果你需要返回完整路径，也可以用ScriptManager主动传递：
    ' ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "imagePath", 
    '     $"var imagePath = '{ResolveUrl("~/Uploads/" & targetFileName)}';", True)
End Sub

关键注意事项 #

• 确保服务器上的Uploads文件夹有写入权限，否则文件保存会失败。
• 如果你的上传目录不是~/Uploads/，请同步修改客户端和服务器端的路径。
• 若要避免文件名重复，建议在服务器端给文件名添加时间戳或随机字符串，再把修改后的文件名传递给客户端。

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