how to upload multiply files with icon button

Question

I'm want to create form with icon button. when user click on the icon browser dialog will open and allow him to choose file. after he finish i would him to have the option to click again on the icon and choose another file (limited to X files).

how can i do that?

this is what i have now: (hide = display:none )

<form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data">

    <img class="uploadFileImg" alt="" src="images/photoIconOn.png"> <br /><br/>
    <span class="fileNameBox"></span>
    <input type='file' name='file[]' class='file-field hide' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" />

</form>

js:

$(".uploadFileImg").on('click',function(){
   $(".file-field").trigger('click'); 

    var new_field = $("<input type='file[]' class='form-control file-field hide'>");
    $(this).closest('form').append(new_field);     

}); 

check file validation:

$(function() {
    $('input.file-field').on('change', function(e) {
        var filename = $(this).val();
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(filename)) {
            this.value = '';
            $(this).closest('form').find('.fileNameBox').html("<span class='valid_msg'>Only images allowed</span>");
        }
        else
            $(this).closest('form').find('.fileNameBox').html("Image: " + filename + " <button class='clear_file btn btn-default btn-xs'>remove</button>");
  });
});

Remove files:

$(function() {
    $(document).on('click','.clear_file',function() {
        $(this).closest('form').find('input.file-field').val("")
        $(this).closest('form').find('.fileNameBox').html("");
  });
});