如何使用 Ajax 发送输入文本和 FileUploud 数据

Question

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

<input type="text" id="txtChanelName" class="input-field" runat="server" />

<input type="file" id="fpImage" class="input-field" runat="server"  />   

<button id="btnInsertChanel" onclick="return AddChanel(this.value);" 
    value='<%=Session["GroupId"].ToString()%>' >add</button>

我的 javascript 代码如下

<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>

我的 C# 代码如下

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

Answer 1

需要注意的几点：

不是仅使用 var chanelname = document.getElementById("txtChanelName"); 获取 html 元素，而是使用 var chanelname = document.getElementById("txtChanelName").value; 立即获取值。
如果您的按钮导致回发而您不希望这样，请将您的 js 的第一行设为 event.preventDefault();。
按钮的 onclick 事件不需要 return。

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

如果您只需要 1 个文件，请立即获取名称：var file = document.getElementById("fpImage").files[0].name;。然后更改代码隐藏以获得 string 而不是 string[].
如果您使用 document.getElementById("fpImage").files[0]，您将得到一个 object，您必须更改后面的代码才能得到一个 object，而不是 string[]。

Answer 2

我将文件转换为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);
    }

如何使用 Ajax 发送输入文本和 FileUploud 数据

How Send Input Text And FileUploud Data Using Ajax

c#

asp.net

ajax

webforms