Multiple file upload

Question

User-807215970 posted

Hi,

How to create multiple file upload in ASP.NET (not third party components) that allows user to select multiple files then press upload all

Thanks

Answer 1

User2103319870 posted

If you are using .net framwork 4.5 then you can use the FileUpload Control's AllowMultiple Property to specify that multiple files can be selected for upload

Refer this link for more details : http://www.itorian.com/2014/01/single-file-upload-to-multiple-file.html

How ever if you are using lower framework of .net then you need to have a custom implementation to make fileupload control upload multilple files.

Check this link for a sample implementation : http://www.aspdotnet-suresh.com/2012/12/aspnet-upload-multiple-files-using.html

Another best option is to use AjaxControlToolkit FileUpload control to implement multiple file Upload control.

Answer 2

User-807215970 posted

Thanks A2H i used AjaxToolkit Multifile upload but how to show images after uploding each image file completed

I tried to put code after upload completed event but it does not show it . Please seet the follwing:

here is the UI:

asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   

    <div style="width: 405px; height: 45px">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="jpg,jpeg,png,gif" MaximumNumberOfFiles="10" OnUploadComplete="File_Upload" Width="465px" />
        </ContentTemplate>
    </asp:UpdatePanel>
        <asp:Image ID="Image1" runat="server" Height="90px" ImageUrl="" Width="223px" />



    </div>
   

Here is code behined:

 protected void File_Upload(object sender, AjaxFileUploadEventArgs e)
    {

        var ajaxUpload = (AjaxFileUpload)sender;
        string strLongFilePath = e.FileName;
        string strFileExtension = System.IO.Path.GetExtension(strLongFilePath);    
        char[] ch = new char[] { '\\' };   
        string[] strPath = strLongFilePath.Split(ch);
        string strInternalFileName = DateTime.Now.ToFileTime().ToString() + strFileExtension;
        string strDestPath = Server.MapPath("~/Uploads/");
        ajaxUpload.SaveAs(@strDestPath + strInternalFileName);
        Image1.ImageUrl = @strDestPath + strInternalFileName;
       
    }

when i tried to upload one image it uploads sucessfully but does not showin in Image1 image

Thanks alot

Answer 3

User2103319870 posted

You need to make two changes to your code like given below

First move your image control also inside updatepanel

<div style="width: 405px; height: 45px">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="jpg,jpeg,png,gif"
                    MaximumNumberOfFiles="10" OnUploadComplete="File_Upload" Width="465px" />
                <%--Move your Image control inside updatePanel like this--%>
                <asp:Image ID="Image1" runat="server" Height="90px" ImageUrl="" Width="223px" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

Secondly Change  the image path like given below

protected void File_Upload(object sender, AjaxFileUploadEventArgs e)
        {

            var ajaxUpload = (AjaxFileUpload)sender;
            string strLongFilePath = e.FileName;
            string strFileExtension = System.IO.Path.GetExtension(strLongFilePath);
            char[] ch = new char[] { '\\' };
            string[] strPath = strLongFilePath.Split(ch);
            string strInternalFileName = DateTime.Now.ToFileTime().ToString() + strFileExtension;
            string strDestPath = Server.MapPath("~/Uploads/");
            ajaxUpload.SaveAs(@strDestPath + strInternalFileName);
            //Change the image url path like given below
            Image1.ImageUrl = "~/Uploads/" + strInternalFileName;

        }