How to Use file upload control in this case

See more:

ASP.NET4

<div id="FileUploadModelExtender">
            <cc1:ModalPopupExtender ID="modeloPopUpFileUpload"
                 runat="server"
                CancelControlID="cancelPopup"
                TargetControlID="btnfileAttachmentpopup"
                PopupControlID="fileUploadPopUp"
                DropShadow="true"
                PopupDragHandleControlID="PopupHeader"
                Drag="true"
                BackgroundCssClass="modalBackground">
            </cc1:ModalPopupExtender>
        </div>

This is My popup which get open on a button click.
My popup contain

<div class="BrwsBtnWrpr">

                                <%--   <a class="popUpBrwscntrl"  href="#popUpcntrlBrwsCntnts">
                                      <p id="brwsBtnTxt">Browse</p>
                                    </a>--%>
                                <asp:Button ID="btnfileAttachmentpopup" runat="server" Text="File attachment" CssClass="btnBrws" href="#popUpcntrlBrwsCntnts" />



                                <div class="modelPopupCntnr">

                                    <asp:Panel ID="fileUploadPopUp" runat="server" BackColor="white">
                                        <div class="ModelPopupWrpr">


                                            <!-- popup title goes here-->
                                            <div class="toaGrpBg">
                                                <div class="grpTitle">
                                                    <p>Select Files</p>
                                                </div>
                                            </div>

                                            <!--end of title -->
                                            <div class="dvdr10pxBlnk"></div>
                                            <!-- Popup control sGoes here--->
                                            <div class="ModelpopCntrlCntnts">
                                                <asp:FileUpload ID="FU1" CssClass="fileUploadCntrl" name="fileAttachments" runat="server" onchange="FileExtensionValidation(this.value, this.id);" />
                                            </div>
                                            <div class="clearBth"></div>
                                            <div class="ModelpopCntrlCntnts">
                                                <asp:FileUpload ID="FU2" CssClass="fileUploadCntrl" name="fileAttachments" runat="server" onchange="FileExtensionValidation(this.value, this.id);" />
                                            </div>
                                            <div class="clearBth"></div>
                                            <div class="ModelpopCntrlCntnts">
                                                <asp:FileUpload ID="FU3" CssClass="fileUploadCntrl" name="fileAttachments" runat="server" onchange="FileExtensionValidation(this.value, this.id);" />
                                            </div>
                                            <div class="clearBth"></div>
                                            <div class="ModelpopCntrlCntnts">
                                                <asp:FileUpload ID="FU4" CssClass="fileUploadCntrl" name="fileAttachments" runat="server" onchange="FileExtensionValidation(this.value, this.id);" />
                                            </div>
                                            <div class="clearBth"></div>
                                            <div class="ModelpopCntrlCntnts">
                                                <asp:FileUpload ID="FU5" CssClass="fileUploadCntrl" name="fileAttachments" runat="server" onchange="FileExtensionValidation(this.value, this.id);" />
                                            </div>
                                            <div class="clearBth"></div>
                                            <div class="dvdr10pxBlnk"></div>
                                            <div class="PopupBtnCntrls">

                                                <!-- Cancel Btn-->
                                                <div class="btn">
                                                    <a id="cancelPopup">
                                                        <p>Cancel</p>
                                                    </a>
                                                </div>

                                                <!-- Upload Button-->
                                                <div class="btn">
                                                    <a id="UpldFls">
                                                        <p>Upload Files</p>
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="dvdr10pxBlnk"></div>

                                        </div>
                                    </asp:Panel>
                                </div>
                            </div>

and this is javascript funtion..............

<%--File Upload Scripts--%>
       <script type="text/javascript">

           $(document).ready(function () {

               $('#UpldFls').click(
                   function () {
                       FileUploadClicked();
                   }
                   );
           });

           function FileUploadClicked() {
               $find('<%= modeloPopUpFileUpload.ClientID%>').hide();
               var file1path = $("#ctl00_main_content_FU1")
               if (file1path.val().length > 0) {
                   $("#file1path_s").text(file1path.val())
                   $("#btnFiledelete1").show();
                   $("#file1Flag").val("1")
               }

               var file2path = $("#ctl00_main_content_FU2")
               if (file2path.val().length > 0) {
                   $("#file2path_s").text(file2path.val())
                   $("#btnFiledelete2").show();
                   $("#file2Flag").val("1")
               }

               var file3path = $("#ctl00_main_content_FU3")
               if (file3path.val().length > 0) {
                   $("#file3path_s").text(file3path.val())
                   $("#btnFiledelete3").show();
                   $("#file3Flag").val("1")
               }

               var file4path = $("#ctl00_main_content_FU4")
               if (file4path.val().length > 0) {
                   $("#file4path_s").text(file4path.val())
                   $("#btnFiledelete4").show();
                   $("#file4Flag").val("1")
               }

               var file5path = $("#ctl00_main_content_FU5")
               if (file5path.val().length > 0) {
                   $("#file5path_s").text(file5path.val())
                   $("#btnFiledelete5").show();
                   $("#file5Flag").val("1")
               }
           }

           function file1Delete() {
               // $("#file1_p").hide()
               $("#file1Flag").val("0")
               $("#file1path_s").text("")
               $("#btnFiledelete1").hide();

               $("#ctl00_main_content_FU1").replaceWith($("#ctl00_main_content_FU1").clone(false));
           }

           function file2Delete() {
               // $("#file2_p").hide()
               $("#file2Flag").val("0")
               $("#file2path_s").text("")
               $("#btnFiledelete2").hide();
               $("#ctl00_main_content_FU2").replaceWith($("#ctl00_main_content_FU2").clone(false));
           }

           function file3Delete() {
               // $("#file3_p").hide()
               $("#file3Flag").val("0")
               $("#file3path_s").text("")
               $("#btnFiledelete3").hide();
               $("#ctl00_main_content_FU3").replaceWith($("#ctl00_main_content_FU3").clone(false));
           }

           function file4Delete() {
               // $("#file4_p").hide()
               $("#file4Flag").val("0")
               $("#file4path_s").text("")
               $("#btnFiledelete4").hide();
               $("#ctl00_main_content_FU4").replaceWith($("#ctl00_main_content_FU4").clone(false));
           }

           function file5Delete() {
               // $("#file5_p").hide()
               $("#file5Flag").val("0")
               $("#file5path_s").text("")
               $("#btnFiledelete5").hide();
               $("#ctl00_main_content_FU5").replaceWith($("#ctl00_main_content_FU5").clone(false));
           }

           function FileExtensionValidation(_filePath, id) {
               var _validFileFlag;
               var _FileName = _filePath.split('\\').pop()
               var _FileExt = _FileName.split('.').pop()

               if (_FileExt.toUpperCase() == "xls" || _FileExt.toUpperCase() == "XLS" || _FileExt.toUpperCase() == "xlsx" || _FileExt.toUpperCase() == "XLSX")
                   _validFileFlag = true;
               else {
                   _validFileFlag = false;
                   $("#" + id).replaceWith($("#" + id).clone(false));
               }

               if (!_validFileFlag)
                   alert("file type validation only Excel Files Allowed")
           }

       </script>

when my user click on button attchfile this popup open
and the popup contain 5 upload control.

in my current case.if user choose 3 file and click ok.the popup get hide/close and the file name display on my page.

and if user want to enter 3 more file.

***** when he click again on button attachment the popup open but the old file name present in the popup fileupload controls.


This is my problem

1: first time if my user click attachment the popup get open.he select 2 file.and press ok.the popup hide.'

and at same time he get remember to add 3 more files.
when he click again on attachment button.the old value get hide from the user.we must have the old file record also.


please give me any idea.


I need each and every thing client side.I dont want any post back call :(