Want ajax multiple file upload on my button click

问题:

Here is my .aspx page code

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

 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
    }

How can I achieve ajax multiple file upload on my own button click event as I need to upload multiple file and also other some data on this button click

I have placed control html and the .cs code which is working well and is uploading multiple images with event OnUploadComplete but I need to upload images on abc_Click event so that on single click I can upload images as well as I can save data too

回答1:

You should really consider migrating the project to ASP.NET MVC. That would give you a lot of perks, when sending different and multiple data types to your code-behind. Then you can make a ViewModel which can hold a list of the pictures, alongside with the other information you need, and send all the information to your backend in one call.

Off course, I don't know if you are already experienced in MVC, but if not, refer to this link for more knowledge: https://www.asp.net/mvc

I hope that helped you a little, else let me know.

回答2:

There are lots of ways to upload multiple files in Asp.Net. You Should use following method 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# Event

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));
}

Or you can use JQuery to upload Multiple files like below. Download JQuery.js and jQuery.MultiFile.js from JQuery multiple-file-upload plugin

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

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>";
            }
        }
   }

回答3:

So I assume all is working well except that you wish to trigger the upload when some other button (that is probably in other part of your HTML markup) You can simply add a button on the same page:

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