想要在我的按钮单击事件上上传 ajax 多个文件

Question

这是我的 .aspx 页面代码

 <form id="form1" runat="server">
    <asp:ToolkitScriptManager runat="server">
    </asp:ToolkitScriptManager>
    <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
        Width="400px" OnUploadComplete="OnUploadComplete" Mode="Auto" />
    <asp:Button ID="abc" runat="server" Text="Button" OnClientClick="$('.ajax__fileupload_uploadbutton').trigger('click');" OnClick="abc_Click" />
</form>

.aspx.cs 代码是

 protected void OnUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {
        string fileName = Path.GetFileName(e.FileName);
        AjaxFileUpload1.SaveAs(Server.MapPath("~/uploads/" + fileName));
    }
    protected void abc_Click(object sender, EventArgs e)
    {
    // need file upload on this click and also need to store some outer data in this click event
    }

如何在我自己的按钮单击事件上实现 ajax 多个文件上传，因为我需要在此按钮单击上上传多个文件以及其他一些数据

我已经放置了控制 html 和运行良好的 .cs 代码，并且正在使用事件 OnUploadComplete 上传多个图像，但我需要在 abc_Click 事件上上传图像，以便单击时我可以像我一样上传图像也可以保存数据

Answer 1

您确实应该考虑将项目迁移到 ASP.NET MVC。当向您的代码隐藏发送不同的多种数据类型时，这会给您带来很多好处。然后，您可以制作一个 ViewModel，它可以保存图片列表以及您需要的其他信息，并在一次调用中将所有信息发送到您的后端。

当然，我不知道你是否已经在 MVC 方面有经验，但如果没有， 有关更多知识，请参阅此链接： https://www.asp.net/mvc

希望对你有所帮助，否则请告诉我。

Answer 2

在 Asp.Net 中有很多方法可以上传多个文件。 您应该使用以下方法 HTML：

 <asp:ScriptManager runat="server"></asp:ScriptManager>
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" Width="500px" AllowedFileTypes="jpg,jpeg,png" MaximumNumberOfFiles="4" OnUploadComplete="AjaxFileUpload1_UploadComplete" />

C# 事件

using System;
using System.IO;

 protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string fileName = Path.GetFileName(e.FileName);
AjaxFileUpload1.SaveAs(Server.MapPath("~/uploads/" + fileName));
}

或者您可以使用 JQuery 上传多个文件，如下所示。 从 JQuery multiple-file-upload plugin 下载 JQuery.js 和 jQuery.MultiFile.js

HTML：

<asp:FileUpload ID="FileUploadJquery" runat="server" class="multi"/>

<asp:Button ID="btnJqueryMultipleFiles" runat="server" Text="Upload Files Using Jquery" onclick="btnJqueryMultipleFiles_Click"/>
</div>

C# 事件

protected void btnUpload_Click(object sender, EventArgs e)
    {
        HttpFileCollection multipleFiles = Request.Files;
        for (int fileCount = 0; fileCount < multipleFiles.Count; fileCount++)
        {
            HttpPostedFile uploadedFile = multipleFiles[fileCount];
            string fileName = Path.GetFileName(uploadedFile.FileName);
            if (uploadedFile.ContentLength > 0 )
            {
                uploadedFile.SaveAs(Server.MapPath("~/Files/") + fileName);
                lblMessage.Text += fileName + "Saved <br>";
            }
        }
   }

Answer 3

所以我假设一切正常，除了您希望在其他按钮（可能在您的 HTML 标记的其他部分）时触发上传您可以简单地在同一页面上添加一个按钮：

<input type="button" value="Custom Upload Button" 
    onClick="$('.ajax__fileupload_uploadbutton').trigger('click'); 
        return false;" />