C# 如何使用Ajax发送输入文本和文件上传数据

如何在asp.net C#（Web表单）中使用Ajax发送输入文本和文件上传

---

有几点需要注意：

• 而不是只获取带有

  var chanelname=document.getElementById（“txtChanelName”）的html元素

  ，使用

  var chanelname=document.getElementById（“txtChanelName”）.value立即获取值

• 如果您的按钮导致回发，而您不希望这样，请将js

  事件的第一行设置为preventDefault（）

• 您不需要在按钮的

  onclick

  事件上返回

接下来的两个可能是最重要的：

• 如果只需要1个文件，请立即获取名称：

  var file=document.getElementById（“fpImage”）.files[0]。名称。然后将代码更改为
  字符串
  ，而不是
  字符串[]

• 如果使用

  document.getElementById（“fpImage”）.files[0]

  ，将得到一个

  对象

  ，并且必须更改后面的代码才能得到

  对象

  ，而不是

  字符串[]

---

我将文件转换为base64并发送到代码隐藏

    var chanelname = document.getElementById("ContentPlaceHolder1_txtChanelName");
        var file = document.getElementById("ContentPlaceHolder1_fpImage").files[0];

    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function () {

        $.ajax({
            type: "POST",
            url: "../../Ajax/Chanel.aspx/AddChanelToGroup",
            data: "{'chanName':'" + chanelname.Value + "','groupId':'" + groupId + "','image':'" + btoa(reader.result) + "','extension':'" + extension + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

            },
            error: function (ex) {
                alert("خطا در ارتباط");
            }
        });

    };
    reader.onerror = function () {
        alert('خطا');
    };

Code behind is below:
 [WebMethod]
    public static int AddChanelToGroup(string chanName, string groupId, string image, string extension)
    {
        byte[] b = Convert.FromBase64String(image);
        File.WriteAllBytes("path....", b);
        return ChanelHelper.AddChanelToGroup(chanName,groupId,image,extension);
    }

---

我的问题被解决了，这让我的问题消失了

<script>
    function AddChanel(groupId) {
        var chanelname = document.getElementById("txtChanelName");
        var file = document.getElementById("fpImage").files[0];
        $.ajax({
            type: "POST",
            url: "../../Ajax/Chanel.aspx/AddChanel",
            data: "{'chanName':'" + chanelname.Value 
                                  + "','groupId':'" + groupId 
                                  + "','image':'" + file + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                //
            },
            error: function (ex) {
                alert("err");
            }
        });
    }
</script>

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static bool AddChanel(string chanName,string groupId, string[] image)
{
    //Breakpoint
    return true;
}

    var chanelname = document.getElementById("ContentPlaceHolder1_txtChanelName");
        var file = document.getElementById("ContentPlaceHolder1_fpImage").files[0];

    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function () {

        $.ajax({
            type: "POST",
            url: "../../Ajax/Chanel.aspx/AddChanelToGroup",
            data: "{'chanName':'" + chanelname.Value + "','groupId':'" + groupId + "','image':'" + btoa(reader.result) + "','extension':'" + extension + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

            },
            error: function (ex) {
                alert("خطا در ارتباط");
            }
        });

    };
    reader.onerror = function () {
        alert('خطا');
    };

Code behind is below:
 [WebMethod]
    public static int AddChanelToGroup(string chanName, string groupId, string image, string extension)
    {
        byte[] b = Convert.FromBase64String(image);
        File.WriteAllBytes("path....", b);
        return ChanelHelper.AddChanelToGroup(chanName,groupId,image,extension);
    }