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

时间:2017-06-27 19:26:38

标签: javascript c# asp.net ajax ajaxcontroltoolkit

这是我的.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事件上传图像,以便单击即可上传图像以及我也可以保存数据

3 个答案:

答案 0 :(得分:3)

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

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

我希望能帮到你一点,否则请告诉我。

答案 1 :(得分:0)

有很多方法可以在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>";
            }
        }
   }

答案 2 :(得分:0)

所以我假设一切正常,除非您希望在其他按钮(可能是HTML标记的其他部分)中触发上传。您只需在同一页面上添加一个按钮:

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