通过 Ajax 使用 FormData 将超过 1 个值传递给 webmethod

Question

我正在尝试使用 Ajax 方法中的 FormData 方法将上传的图像和两个附加参数传递到我的 Web 服务，如下所示：

  var formData = new FormData();
  formData.append('file', $('#photo')[0].files[0]);
  formData.append('u', "test");
  formData.append('s', "Testing");

我的 ajax 调用概述如下：

     $.ajax({
            url: "/admin/WebService/test.asmx/UploadImage",
            type: "POST",
            processData: false,
            contentType: false,
            data: formData,
            success: function (response) {
                console.log(response);
            },
            error: function (er) {
                alert(er);
            }

        });

调用此 web 方法：

 [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string UploadImage()
    {

        if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
        {
            var t= System.Web.HttpContext.Current.Request.Files["s"];
            var c= System.Web.HttpContext.Current.Request.Files["u"];
            var p = System.Web.HttpContext.Current.Request.Files["file"];
        }
        else
        {
            return "Error";
        }

        return "Error";
    }

我遇到的问题是参数 'u' 和 's' 为空，但在引用文件时我能够获得它的值。

在搜索网络时，我的印象是您可以在使用这种方法时指定多少 key/values 是必需的，除非我被误导了？有人可以阐明为什么这两个参数为空吗？提前致谢。

Answer 1

你应该创建一个 json 而不是创建这些东西，添加你想通过 ajax 发送的任何密钥。

var formData  = {'u':'value','s':'value'}

$.ajax({
            url: "/admin/WebService/test.asmx/UploadImage",
            type: "POST",
            processData: false,
            contentType: false,
            data: JDON.Stringify(formData),
            success: function (response) {
                console.log(response);
            },
            error: function (er) {
                alert(er);
            }

        });

尝试使用这种方式。

Answer 2

这对我有用：

JavaScript

var formData = new FormData();
            formData.append("UserId", userId);              
            formData.append("RequestPhoto", imageFile);
            formData.append("RequestVoiceRecord", voiceFile);
            formData.append("Latitude", latitude);
            formData.append("Longitude", longtitude);

        $.ajax({
            type: "POST",
            url: "/User/CreateRequest",
            data: formData,
            contentType: false,
            processData: false,

            success: function () {
                alert("OK");
            },
            error: function () {
                alert("Error");
            }

        });

控制器：

 public class UserController : ApiController
    {           

        [HttpPost]
        public int CreateRequest()
        {

            // HttpResponseMessage result = null;
            var httpRequest = HttpContext.Current.Request;

            var req = new UserRequest
            {
                UserId = Guid.Parse(httpRequest.Form["UserId"]),                                      
                Photo = httpRequest.Files["RequestPhoto"],
                VoiceRecord = httpRequest.Files["RequestVoiceRecord"]
                Latitude = float.Parse(httpRequest.Form["Latitude"]),
                Longitude = float.Parse(httpRequest.Form["Longitude"]),
            };

通过 Ajax 使用 FormData 将超过 1 个值传递给 webmethod

Passing more then 1 value to webmethod using FormData via Ajax

ajax

asmx

webmethod

form-data