CODEWITHSUNDEEP
javascripthtmljqueryinputfile-upload
user11657764
user11657764

Reputation:

Problem selecting file when I want to create multiple input type = 'file'

I want to create multiple images for an item. The problem I have is that when I click on the Add button, the input type = 'file' tag is created, but when I click on the created tag, it does not work and only the first option that was initially available works.

enter image description here

in Html

<button type="button" id="bAddImage"> Add </button>
<div class="m-t-15" id="row-file">
<div class="row-file-upload">
    <div class="col-lg-6 col-md-6 m-t-10 row clearfix">
        <button class="material-icons text-center bClear waves-effect bg-blue-grey">clear</button>
        <div class="file-upload">
            <div class="file-select">
                <div class="file-select-name fileName">Choos File</div>
                <div class="file-select-button">... Choose File</div>
                <input type="file" class="chooseFile">
            </div>
        </div>
    </div>
</div>

in Script

<script type="text/javascript">

    $(document).ready(function () {

        $('body').on('click',
            '.bClear',
            function (event) {
                event.preventDefault();

                var $el = $('.chooseFile');
                $el.wrap('<form>').closest('form').get(0).reset();
                $el.unwrap();
                $('.chooseFile').trigger('change');
            });

        $('body').on('change', '.chooseFile', function () {
            var filename = $(".chooseFile").val();
            if (/^\s*$/.test(filename)) {
                $(".file-upload").removeClass('active');
                $(".fileName").text("فایل انتخاب نشده");
            }
            else {
                $(".file-upload").addClass('active');
                filename = filename.replace("C:\\fakepath\\", "");
                if (filename.length > 30) {
                    filename = filename.substring(0, 30) + '...';
                }
                $(".fileName").text(filename);
            }
        });

        $('body').on('click', '#bAddImage', function () {
            $('#row-file').append($('.row-file-upload').html());
        });

        
    });

</script>

Upvotes: 2

Views: 197

Answers (1)

Morteza Asadi
Morteza Asadi

Reputation: 433

this is a simple Example for dynamically adding fileinput to HTML.

$(document).ready(function() {
  var wrapper = $(".wrapper");
  var add_button = $(".Add");
  var uploadField = document.getElementById("file");
  $(add_button).click(function(e) {
   e.preventDefault();
   $(wrapper).append('<div><input type="file" name="att"/><a href="#"class="remove">Remove</a></div>');})
   $(wrapper).on("click", ".remove", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="#" class="Add">+ Add</a>
  <div>
    <input type="file" id="file" name="att">
  </div>
</div>

Upvotes: 1

Related Questions