以 Web 方法将图像插入文件夹

Question

作为我的网络方法的一部分，我正在尝试将图像保存到文件夹中。文件夹名称位于根目录中，称为“图像”。在 web 方法中，我找到了我的 html 控件文件上传并尝试保存图片，但它一直给出以下错误：

System.NullReferenceException: 'Object reference not set to an instance of an object.'
fuClubLogo was null.

我不明白为什么它总是返回 null。

这是我的代码

HTML

<asp:FileUpload ID="fuClubLogo" class="form-control" runat="server" />

<asp:Button ID="btnSaveClub" class="itg-btn news-btn" runat="server" Text="Save"/>

C#

[System.Web.Services.WebMethod]
public static string SaveUpdateClub(string ClubName, string Email, string Password, string ClubLogoName)
{
    string result = string.Empty;
        SqlConnection con = new SqlConnection(
        WebConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from [dbo].[tb_ClubDetails] where ClubID = @ClubID", con);
        cmd.Parameters.AddWithValue("@ClubID", ClubName);
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            result = "A club with this name already exists.";
            con.Close();
            dr.Close();
        }
        else
        {
        //Here I make an attempt to save the image to a folder
            Page page = HttpContext.Current.Handler as Page;
            FileUpload fuClubLogo = (FileUpload)page.FindControl("fuClubLogo");

            string imgFile = Path.GetFileName(fuClubLogo.PostedFile.FileName);
            fuClubLogo.PostedFile.SaveAs(HttpContext.Current.Server.MapPath("/images/") + imgFile);

            SqlConnection con2 = new SqlConnection(
            WebConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString);
            con2.Open();
            SqlCommand cmd2 = new SqlCommand("sp_insertupdateClub", con2);
            cmd2.CommandType = System.Data.CommandType.StoredProcedure;
            cmd2.Parameters.AddWithValue("@ClubID", "");
            cmd2.Parameters.AddWithValue("@ClubName", ClubName);
            cmd2.Parameters.AddWithValue("@ClubEmail", Email);
            cmd2.Parameters.AddWithValue("@ClubPassword", Password);
            cmd2.Parameters.AddWithValue("@ClubLogoImage", ClubLogoName);
            cmd2.Parameters.AddWithValue("@LogoImagePath", "/images/" + ClubLogoName);

            cmd2.ExecuteNonQuery();
            con2.Close();
            result = "The club details are saved.";
        }
        return result;
    }

AJAX

$(document).ready(function () {
    $("#btnSaveClub").click(function () {
        var ClubName = $("#txtClubName").val();
        var Email = $("#txtEmail").val();
        var Password = $("#txtPassword").val();
        var ClubLogoName = $("#fuClubLogo").val().split('\\').pop();



        $.ajax({
            type: "POST",
            url: "AddViewClub.aspx/SaveUpdateClub",
            data: "{'ClubName': '" + ClubName +
                "','Email': '" + Email +
                "','Password': '" + Password +
                "','ClubLogoName': '" + ClubLogoName + "'}",
            contentType: "application/json; charset=utf-8",
            cache: false,
            dataType: "json",
            success: function (response) {
                //document.getElementById("Label10").innerHTML = response.d;
                alert(response.d);
            }
        });
        return false;
    });
});

我也尝试使用 Ajax Jquery 将图像上传到文件夹，但我无法实现，这就是我尝试通过 Web 方法进行的原因。

请协助和建议。谢谢。

Answer 1

您无法访问 web 服务中的页面控件。

1) 创建一个将返回文件名的文件上传处理程序。

public class FileUploadHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
    if (context.Request.Files.Count > 0)
    {
        string filename = Guid.NewGuid().ToString() + ".jpg";
        HttpPostedFile file = context.Request.Files[0];
        string path = context.Server.MapPath("~/images/" + filename);
        file.SaveAs(path);

        context.Response.ContentType = "text/plain";
        context.Response.Write(filename);
    }

}

public bool IsReusable
{
    get
    {
        return false;
    }
}
}

2) 调用上传处理程序然后保存到数据库

$(document).ready(function () {
$("#btnSaveClub").click(function () {
    UploadImage();
    return false;
});

var filename;
function UploadImage() {
    var fileUpload = $("#fuClubLogo").get(0);
    var files = fileUpload.files;

    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    }

    $.ajax({
        url: "FileUploadHandler.ashx",
        type: "POST",
        data: data,
        contentType: false,
        processData: false,
        success: function (result) {
            filename = result;
            SaveToDb();
        },
        error: function (err) {
        }
    });
}

function SaveToDb() {
    var ClubName = $("#txtClubName").val();
    var Email = $("#txtEmail").val();
    var Password = $("#txtPassword").val();
    var ClubLogoName = filename;

    $.ajax({
        type: "POST",
        url: "AddViewClub.aspx/SaveUpdateClub",
        data: "{'ClubName': '" + ClubName +
            "','Email': '" + Email +
            "','Password': '" + Password +
            "','ClubLogoName': '" + ClubLogoName + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            //document.getElementById("Label10").innerHTML = response.d;
            alert(response.d);
        }
    });
}
});