ASP.Net Web Form中jQuery异步文件上传问题及正确实现方式

你的WebMethod断点没触发，且返回完整页面HTML，核心原因是ASP.NET WebMethod默认仅处理application/json格式的请求，而你用FormData发送的是multipart/form-data格式的请求，ASP.NET会把它当成普通的页面POST请求，而非WebMethod调用，自然不会触发你的SaveNewMember方法，直接返回了页面内容。

另外还有几个小细节需要调整，下面是完整的修正方案：

1. 修正前端jQuery代码 #

需要添加X-Requested-With请求头（告诉ASP.NET这是AJAX请求），同时规范FormData的键名，方便后端获取：

var urlToSend = "Default.aspx/SaveNewMember";
var fileInput = document.getElementById("MainContent_fu_image");

// 先判断是否选择了文件
if (fileInput.files.length === 0) {
    displayMessage("warning", "请先选择要上传的文件");
    return;
}

var file = fileInput.files[0];
var formData = new FormData();
// 给文件指定一个固定键名，后端可以直接通过这个键获取
formData.append("uploadFile", file, file.name);

$.ajax({
    type: "POST",
    url: urlToSend,
    data: formData,
    processData: false,
    contentType: false,
    // 关键：添加这个头，让ASP.NET识别为AJAX请求
    headers: {
        "X-Requested-With": "XMLHttpRequest"
    },
    success: function (response) {
        // WebMethod返回的结果会被包裹在d属性里
        displayMessage("success", response.d);
    },
    error: function (xhr, status, error) {
        displayMessage("warning", `上传失败：${error}（状态码：${xhr.status}）`);
    }
});

2. 修正后端VB.NET WebMethod代码 #

必须添加ScriptMethod特性，明确这个WebMethod支持AJAX请求，同时直接通过HttpContext.Current处理文件，不需要获取页面实例：

<System.Web.Services.WebMethod()>
<System.Web.Script.Services.ScriptMethod(UseHttpGet:=False, ResponseFormat:=System.Web.Script.Services.ResponseFormat.Json)>
Public Shared Function SaveNewMember() As String
    Try
        Dim requestFiles = HttpContext.Current.Request.Files
        
        ' 先检查是否有上传的文件
        If requestFiles.Count = 0 Then
            Return "未检测到上传的文件"
        End If
        
        Dim targetFile = requestFiles("uploadFile") ' 对应前端的键名
        If targetFile.ContentLength > 0 Then
            ' 示例：保存到服务器的Uploads目录
            Dim saveDirectory = HttpContext.Current.Server.MapPath("~/Uploads/")
            ' 确保目录存在，避免保存失败
            If Not IO.Directory.Exists(saveDirectory) Then
                IO.Directory.CreateDirectory(saveDirectory)
            End If
            
            Dim fullSavePath = IO.Path.Combine(saveDirectory, targetFile.FileName)
            targetFile.SaveAs(fullSavePath)
            
            Return $"文件上传成功：{targetFile.FileName}"
        Else
            Return "上传的文件为空"
        End If
    Catch ex As Exception
        Return $"上传失败：{ex.Message}"
    End Try
End Function

3. 关键注意事项 #

• ScriptMethod特性是核心：这个特性会告诉ASP.NET，该WebMethod可以处理AJAX请求，并且指定响应为JSON格式，没有它的话，multipart/form-data请求无法正确路由到WebMethod。
• 确保目录权限：服务器上的~/Uploads/目录需要有写入权限，否则文件保存会失败。
• 验证控件ID：MainContent_fu_image是母版页生成的客户端ID，确认它和页面实际渲染的ID一致（可以通过浏览器F12查看）。

现在你再测试一下，WebMethod的断点应该能正常触发，文件也能成功上传了。

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