无法使用 javascript 和 asp.net 从 AjaxFileUpload 获取文件名答案

【问题标题】：Cannot get filename from AjaxFileUpload using javascript and asp.net无法使用 javascript 和 asp.net 从 AjaxFileUpload 获取文件名
【发布时间】：2023-03-18 09:40:02
【问题描述】：

我已经尝试解决这个问题并研究了几个星期，但我仍然无法让它发挥作用。我的代码是简单地上传图像，然后将其保存在数据库中而无需回发。

截至目前，我使用 AjaxFileUpload 来上传图片。我的计划是使用 javascript 在 AjaxFileUpload 中获取上传的文件名，然后将其存储在隐藏字段中。然后当管理员单击提交时，它将获取存储在隐藏字段中的值，然后将其保存在数据库中（使用我在代码隐藏中创建的查询）。

问题是，它总是返回空。我希望你们能真正帮助我解决这个问题。

这是aspx的代码：

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="CreateBrands.aspx.cs" Inherits="Pages_CreateBrands" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="asp"%>  

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Music Store</title>
<script src="../Javascript/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="~/Styles/jquery.bxslider.css"/>
<link rel="shortcut icon" type="image/png" href="~/Images/rockSign.png"/>
<script type="text/javascript">
    function abc() {
    var elem1 = document.getElementById('<%# itemFileUpload1.ID %>').value;
        document.getElementById('HiddenInput1') = elem1;
    var elem2 = document.getElementById('<%# itemFileUpload2.ID %>').value;
        document.getElementById('HiddenInput2') = elem2;
    }
</script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
                    </asp:ScriptManager>
     <div id="wrapper">

         <h1>Item Image1:</h2>
         <br />

         <asp:AjaxFileUpload ID="itemFileUpload1" runat="server"
         Width="300px" OnUploadComplete="itemUploadImage1"
         OnClientUploadComplete="abc"/>
       <input type="hidden" id="HiddenInput1" name="HiddenInput" value="" />

        <h1>Item Image2:</h2>
        <br />

        <asp:AjaxFileUpload ID="itemFileUpload2" runat="server" 
         Width="300px" OnUploadComplete="itemUploadImage2" 
        OnClientUploadComplete="abc"/>
       <input type="hidden" id="HiddenInput2" name="HiddenInput" value="" />
        <br/>

      <asp:Label ID="lblResult2" runat="server" Text=""></asp:Label>
        <br />

      <asp:Button ID="Button1" runat="server" CssClass="submitButton" 
      Text="Save Item" OnClick="Button1_Click"/>

    </div>
   </form>
 </body>
 </html>

这里是 aspx.cs 的代码：

  protected void itemUploadImage1(object sender, AjaxFileUploadEventArgs e)
{

        string filename = Path.GetFileName(e.FileName);
        itemFileUpload1.SaveAs(Server.MapPath("~/Images/Brands/String Instrument Items/Guitar/") + filename);
}

protected void itemUploadImage2(object sender, AjaxFileUploadEventArgs e)
{
        string filename = Path.GetFileName(e.FileName);
        itemFileUpload2.SaveAs(Server.MapPath("~/Images/Brands/String Instrument Items/Guitar/") + filename);

}

 protected void Button1_Click(object sender, EventArgs e)
 {
        try {

            string item_image1 = Request.Form["HiddenInput1"];
            string item_image2 = Request.Form["HiddenInput2"];

            ConnectionClassGuitarItems.AddStringInstrumentItems(item_image1,item_image2);

            lblResult2.Text = "Upload successful!" + item_image1 + " and " + item_image2;

            ClearTextFields2();
        }
        catch (Exception ex)
        {
            lblResult2.Text = ex.Message;
        }
}

注意 Button1_Click，我尝试访问 HiddenInput1 和 HiddenInput2 的值，但它们似乎是空的。

【问题讨论】：

您是否要获取客户端机器上的文件名？
@litelite - 是的，因为我尝试在代码隐藏中检索文件，但没有成功。这就是为什么我想，也许如果我以某种方式在客户端检索文件名，也许它会起作用。但事实证明它也不起作用。到目前为止，我对如何实现这一点没有任何想法。
@mjwills - 我能够通过 gridview 知道它是否为空。 image1 和 2 的图像列是空的。
@mjwills - 即使使用不同的浏览器也会得到相同的结果。

标签： javascript c# asp.net

【解决方案1】：

为什么不使用常规的 asp:FileUpload 控件并将部分表单/代码块包装在更新面板中以实现与使用 AjaxFileUpload 控件相同的所需操作：

<asp:UpdatePanel runat="server" UpdateMode="Always" ID="updPnlName">
 <ContentTemplate>
   <asp:FileUpload runat="server" ID="fileImport" CssClass="form-control"/>
 </ContentTemplate>
</asp:UpdatePanel>

代码背后：

    protected void btnUpload_OnClick(object sender, EventArgs e)
    {
        if (fileImport.HasFile)
        {
            UploadProcessFile();
        }
    }

    private void UploadProcessFile()
    {            
        var fileName = fileImport.FileName;
        //Process the rest of your code below you can also assign the file name to your textbox.
    }

【讨论】：

有趣！这实际上对我有用。但是在 UpdatePanel 之后缺少一个。
我以前没有想过这种方法。我之前已经尝试过updatepanel，当我上传图片时它仍然会刷新页面。您的方法已将其删除。
很抱歉缺少。很高兴我能提供帮助，尽管有时更新面板可能是邪恶的，但在这种情况下，它们似乎总是有效，我已将其添加到原始响应中。

【解决方案2】：

您可以在

上的 aspx 文件中获取这样的图像名称

 <asp:AjaxFileUpload ID="itemFileUpload2" runat="server" 
     Width="300px" OnUploadComplete="itemUploadImage2" 
    OnClientUploadComplete="abc"/>

使用这个脚本

    function abc(sender, args) {
           var Imagename = args.get_fileName();
         alert(Imagename );
       }

这个方法很简单希望对你有帮助

【讨论】：