locked
Multiple file upload RRS feed

  • 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

    Thursday, June 19, 2014 2:38 PM

Answers

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 19, 2014 4:35 PM

All replies

  • 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.

    Thursday, June 19, 2014 3:00 PM
  • 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

    Thursday, June 19, 2014 3:58 PM
  • 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;
    
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 19, 2014 4:35 PM