locked
Clear ui list RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code and i want if user again clicks on Browse ulList should get clear first

    <div id="divpan" runat="server">
                                                    <div class="form-group">
    
                                                        <asp:FileUpload runat="server" ID="FileUpload1" AllowMultiple="true" />  
                                                        <ul id="ulList"></ul>
                                                </div>
    
    <script>
                $(function () {
                    $('#FileUpload1').change(function () {
                        var fp = $("#FileUpload1");
                        var lg = fp[0].files.length;
                        var items = fp[0].files;
                        if (lg > 0) {
                            for (var i = 0; i < lg; i++) {
                                var fileName = items[i].name;
                                $("#ulList").append("<li>" + fileName + "</li>");
                            }
                        }
                    })
                })
            </script>

    Thanks

    Thursday, January 3, 2019 6:54 AM

Answers

  • User283571144 posted

    Hi JagjitSingh,

    According to your description and codes,I suggest you could use remove funtion to delete the original li.

    More details, you could refer to the following code.

     

    <script src="../Scripts/jquery-1.10.2.js"></script>
    
      <div id="divpan" runat="server">
           <div class="form-group">
          <asp:FileUpload runat="server" ID="FileUpload1" AllowMultiple="true"    /><br />  
          <ul id="ulList"></ul>
          </div>
          </div>
    
    <script>
                $(function () {
                    $('#FileUpload1').change(function () {
                        var fp = $("#FileUpload1");
                        var lg = fp[0].files.length;
                    var items = fp[0].files;
                    $("#ulList").find("li").remove();
                        if (lg > 0) {
                            for (var i = 0; i < lg; i++) {
                                var fileName = items[i].name;
                                $("#ulList").append("<li>" + fileName + "</li>");
                            }
                        }
                    })
                })
    </script>
    
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 4, 2019 5:09 AM

All replies

  • User738333362 posted

    While page reloading .. clear the list values and bind the new value stored in the file upload control.

    <body onload="foo()">
    window.onload = function() {
      yourFunction(param1, param2);
    };
    Thursday, January 3, 2019 7:15 AM
  • User283571144 posted

    Hi JagjitSingh,

    According to your description and codes,I suggest you could use remove funtion to delete the original li.

    More details, you could refer to the following code.

     

    <script src="../Scripts/jquery-1.10.2.js"></script>
    
      <div id="divpan" runat="server">
           <div class="form-group">
          <asp:FileUpload runat="server" ID="FileUpload1" AllowMultiple="true"    /><br />  
          <ul id="ulList"></ul>
          </div>
          </div>
    
    <script>
                $(function () {
                    $('#FileUpload1').change(function () {
                        var fp = $("#FileUpload1");
                        var lg = fp[0].files.length;
                    var items = fp[0].files;
                    $("#ulList").find("li").remove();
                        if (lg > 0) {
                            for (var i = 0; i < lg; i++) {
                                var fileName = items[i].name;
                                $("#ulList").append("<li>" + fileName + "</li>");
                            }
                        }
                    })
                })
    </script>
    
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 4, 2019 5:09 AM