使用AJAX与ASP.NET实现文件及文本内容的单请求上传

我懂你现在的痛点——分开请求总是出问题，想把文件和文本一次性通过AJAX发给同一个WebMethod处理对吧？其实这个需求完全可以实现，核心是利用FormData对象打包所有数据，再调整WebMethod的处理逻辑来同时接收文件和文本参数。下面是具体的解决方案：

第一步：修改前端AJAX代码 #

你需要把文本参数和文件一起放进FormData里，替代原来的两个分开请求。修改后的enterDocumentInfo函数如下：

function enterDocumentInfo() {
    // 获取页面上的文本参数（这里替换成你实际的取值逻辑）
    var leaseID = "你的leaseID值";
    var userID = "你的userID值";
    var note = $("#TextArea_Modal_Document_Note").val();
    
    // 创建FormData对象，统一打包文件和文本
    var formData = new FormData();
    // 添加上传文件
    var file = $("#FileUpload_Modal_Document").get(0).files[0];
    if (file) {
        formData.append("uploadedFile", file);
    }
    // 添加文本参数
    formData.append("leaseID", leaseID);
    formData.append("userID", userID);
    formData.append("note", note);

    // 发送合并后的AJAX请求
    $.ajax({
        url: "Lease_View.aspx/enterDocument",
        type: "POST",
        data: formData,
        contentType: false, // 必须设为false，让浏览器自动处理multipart格式
        processData: false, // 必须设为false，避免jQuery破坏FormData结构
        success: function (response) {
            alert("上传成功！");
            $("#Modal_New_Document").modal("hide");
        },
        error: function (xhr, status, error) {
            alert("上传失败：" + error);
        }
    });
}

第二步：修改后端WebMethod #

因为现在请求是multipart/form-data格式，而非WebMethod默认的JSON，所以需要通过HttpContext来获取请求中的文件和参数，修改后的enterDocument方法如下：

[System.Web.Services.WebMethod]
public static string enterDocument()
{
    try
    {
        // 从请求中获取文本参数
        string leaseID = HttpContext.Current.Request.Form["leaseID"];
        string userID = HttpContext.Current.Request.Form["userID"];
        string note = HttpContext.Current.Request.Form["note"];

        // 获取上传的文件
        HttpPostedFile uploadedFile = HttpContext.Current.Request.Files["uploadedFile"];
        string fileName = string.Empty;
        if (uploadedFile != null && uploadedFile.ContentLength > 0)
        {
            // 处理文件保存逻辑（示例：保存到服务器Uploads文件夹）
            fileName = Path.GetFileName(uploadedFile.FileName);
            string savePath = HttpContext.Current.Server.MapPath("~/Uploads/" + fileName);
            uploadedFile.SaveAs(savePath);
        }

        // 执行数据库插入操作
        using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString))
        {
            string sql = "INSERT INTO Lease_Documents (LeaseID, UserID, Note, File_Name) VALUES (@LeaseID, @UserID, @Note, @File_Name)";
            using (SqlCommand cmd = new SqlCommand(sql, conn))
            {
                cmd.Parameters.AddWithValue("@LeaseID", leaseID);
                cmd.Parameters.AddWithValue("@UserID", userID);
                cmd.Parameters.AddWithValue("@Note", note);
                cmd.Parameters.AddWithValue("@File_Name", fileName);
                
                conn.Open();
                cmd.ExecuteNonQuery();
            }
        }

        return "操作成功";
    }
    catch (Exception ex)
    {
        return "操作失败：" + ex.Message;
    }
}

关键注意事项 #

• contentType和processData必须设为false：这两个参数是文件上传的核心配置，否则jQuery会错误地序列化FormData，导致文件无法正确传递。
• WebMethod参数处理：因为请求格式变为multipart/form-data，不能再用方法参数直接接收，必须通过HttpContext.Current.Request来获取表单数据和文件。
• 服务器权限：确保服务器上的Uploads文件夹有写入权限，否则文件保存会失败。
• 异常捕获：添加try-catch块可以快速定位上传过程中的错误，比如数据库连接失败、文件保存失败等。

这样修改后，你就能通过单个AJAX请求同时上传文件和文本内容，并且由同一个WebMethod处理所有逻辑了。

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