Uploading N number of files by single upload

Uploading N number of files by single upload

In this artilce we will discuss how to upload N number of files by single upload. The batch upload feature comes very handy when you have multiple files to upload and user doesn't want to upload one by one.


This artilce is tested in IE and chrome, the dispay of input type file is different in IE and chrome.

Let's see how we can achieve above feature of uploading N number of files by single upload button.

Step 1: Add below lines of code in aspx page.
<div>
      <input type="file" name="attachment" runat="server" id="attachment"onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
      <input type="hidden" value="0" id="fileCount" />
      <div id="fileDiv">
      </div>
      <div id="moreUploadsLink" style="display: none">
            <a href="javascript:addFile();">Attach another File</a>
      </div>
      <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /></div>

Step 2: Add below javascript in the aspx page, which will give option to add another file and remove file.
<script language='Javascript' type="text/javascript">
      function addFile() {
            var ni = document.getElementById("fileDiv");
            var objFileCount = document.getElementById("fileCount");
            var num = (document.getElementById("fileCount").value - 1) + 2;
            objFileCount.value = num;
            var newdiv = document.createElement("div");
            var divIdName = "file" + num + "Div";
            newdiv.setAttribute("id", divIdName);
            newdiv.innerHTML = '<input type="file" name="attachment" id="attachment"/><a href="#" onclick="javascript:removeFile('+ divIdName + ');">Remove </a>';
            ni.appendChild(newdiv);
      }

      function removeFile(divName) {
            var d = document.getElementById("fileDiv");
      d.removeChild(divName);
}
</script>

Step 3: Add below lines of code in codebehind file.
protected void btnUpload_Click(object sender, EventArgs e)
{
      HttpFileCollection uploadFiles = Request.Files;
      for (int i = 0; i < uploadFiles.Count; i++)
     {
            HttpPostedFile uploadFile = uploadFiles[i];
            string fileName = Path.GetFileName(uploadFile.FileName);
            if (fileName.Trim().Length > 0)
            {
                  uploadFile.SaveAs(Server.MapPath("./Others/") + fileName);
            }
      }
}

Step 4: Add method="post" in the form tag. The post tag is used to get the attached file names from input type file.
   <form id="form1" runat="server" method="post"> 
 Live Demo

This ends the article of uploading N number of files by single upload.
Like us if you find this post useful. Thanks! 

Rehan Parvez

how enable textbox using jQuery

how enable or disable textbox and DropdownList using jQuery



   function EnableChapter() {
            //   var isChecked = $(this).prop('checked');
            var isChecked = $('#<%=rbNewChapter.ClientID%>');  //.prop('checked');      
            if (isChecked.attr('checked')) {
                $('#<%=ddlChapterName.ClientID%>').attr('disabled', 'disabled');
                $('#<%=txtChapterName.ClientID%>').removeAttr("disabled");              
            }
            else {
             
                $('#<%=ddlChapterName.ClientID%>').removeAttr("disabled");
                $('#<%=txtChapterName.ClientID%>').attr('disabled', 'disabled');
            }

Curve border of any control Button, textbox, div and many

Curve border of any control Button, textbox, div and many



 .cover
        {
            border: 1px solid #B7C1FF;
         
            -moz-border-radius: 6px;                        // this for  FF
            -webkit-border-radius: 6px;                     // this Chrome
             border-radius: 6px;                                  // this for IE
        }


This Cover All outer Border

This will Curve the Border of Header  as (BANK EXAM)



 .Hiding
        {
            background-color: #b7c1ff;
            height: 25px;
            text-align: center;
            vertical-align: middle;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
        }

Change Scrollbar Style for Div

Change Scrollbar Style for Div

specify div with Class name




  .pnlpassQ
        {
             max-width:100%;
             max-height: 200px;
             overflow: auto;        
        }
     .pnlpassQ::-webkit-scrollbar
        {
            width: 8px;
        }
       
        .pnlpassQ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
            border-radius: 5px;
        }
       
        .pnlpassQ::-webkit-scrollbar-thumb
        {
            border-radius: 5px;
            background: #00BFFF;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        }

       

loading the data to muliple Repeater by passing parameter

loading the data to muliple Repeater by passing parameter

this method application for controls such as Dropdown , gridview , report and many

private void LoadSubCourse(String Courses, Repeater Repeater)

        {

            try

            {

                DataTable _dt = new DataTable();

                _dt = objsubCourse.SubCourseDetail(Int32.Parse(Session["CustomerId"].ToString()), Courses);

                if (_dt != null && _dt.Rows.Count > 0)

                {

                    Repeater.DataSource = _dt;

                    Repeater.DataBind();

                }

                else

                {

                }

            }

            catch { }

        }  

calling this method by passing Different It

rpData1,rpData2,rpData adn rpDataOther are the Repeaters

Page Load()

{

                LoadSubCourse("BANK" ,rpData);

                LoadSubCourse("MPSC",rpData1);

                LoadSubCourse("CRT", rpData2);

                LoadSubCourse("", rpDataOther); 

}

Calling the Non Static Method from Static Method

Calling the Non Static Method from Static Method



 static public string SaveImages(ClassName obj)
    {
        string bb = obj.SaS(10); // HttpContext.Current.SaS(ii);
        return bb;
    }
    public string SaS(int ii)
    {
        string i = "iTechGalaxy";
        return i;
    }

Query Doesnot After PostBack

JQuery Doesnot After PostBack

and

FileUpload Content Refreshed During pageload if it is used in a user control

If your usercontrol has a file upload button and when you are inserting data or in any post back its refreshed then do one thing
Go to your user control page load event and put the following code there

  ScriptManager.GetCurrent(this.Parent.Page).RegisterPostBackControl(ImgBtnSave);

ImgBtnSave is the control where we are trying to add data without refreshing the file upload content.

THANKS Rehan Parvez