Repeat input type file by taking integer input from user-CodePudding

So, basically i have a textbox and file upload button . What i want when user enter integer in textbox for eg :10 then i want to display file upload button 10 times.

CodePudding user response：

Here is a working demo hope it will helpful for you.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 
function AppendRow(e) {
    var val = e.value;
    if (val !== "") {
      var html ='';
        for (var i = 0; i < val; i  ) {
          html  ='<input type="file" id="file">';
        }
     $("#append").empty().append(html);
    }
}
</script>
</head>
<body>
 

<input  type="text" id="input1" onkeyup="AppendRow(this)"/> 
 <div id="append">
 
 <div>
 
</body>
</html>

CodePudding user response：



    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    
        $(document).ready(function(){
    $("input").keyup(function(){
    var val = $(this).val();
        if (val !== "") {
          var html;
            for (var i = 0; i < val; i  ) {
              html = '<input type="file" id="file">';
              $("#append").append(html);
            }
         
        }
    });
});
    </script>
    </head>
    <body>
     

    <input  type="text" id="input" /> 
     <div id="append">
     
     </div>
     
    </body>
    </html>
 Run code snippetHide resultsExpand snippet

CodePudding user response：

Please use the following code

<input [(ngModel)]="count" />
<div *ngFor="let item of [].constructor(count); ">
  <input type='file'>
</div>