JSFiddle - React, Tailwind, and code Playground

by tuanitpro

HTML

<div>
       
        <h3>Upload nhiều file trong ASP.NET MVC</h3>
        <fieldset>
            <legend>Upload multi file</legend>
            <form>
 
                <label>Chọn file: </label><br />
                <a class="btnAddNew" href="#">Thêm</a>
                <br />
                <div id="myinput" class="myinput">
                    <input type="file" name="uploadFile[0]" required /><br />
                </div>
                <br />
                <input type="submit" value="Upload" />
 
            </form>
        </fieldset>
        http://tuanitpro.com
    </div>

JavaScript

$(document).ready(function () {
            var max_fields = 10; //maximum input boxes allowed
            var wrapper = $(".myinput"); //Fields wrapper
            var add_button = $(".btnAddNew"); //Add button ID
 
            var x = 0; //initlal text box count
            $(add_button).click(function (e) { //on add input button click
                e.preventDefault();
                if (x < max_fields) { //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div>   <input type="file" name="uploadFile['+x+']" /><a href="#" class="btnRemove">Xóa</a></div>'); //add input box
                }
            });
 
            $(wrapper).on("click", ".btnRemove", function (e) { //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });