Click button will trigger setup function and add change event to input file, after choosing file , it will upload. The question is that it will run multiple times based on uploading times. I tried to reset the input file value after uploading , and still it will run twice in second times. How to fix this problem, I don't want to refresh page, and also I want it only run one time every click.

html code below

<input onclick='setup()' value='btn' type='button' class='btn btn-info'>
<form id='formid' method='POST' enctype='multipart/form-data'>
     <input accept='image/*' id='fileid' type='file' name='my_file' onsubmit='return false' />
     <input  type='submit' value='Submit' />
</form>

js code below

function setup(key) {
    document.getElementById('fileid').click();
    document.getElementById('fileid').addEventListener('change', submitForm);
    function submitForm() {
        var data = new FormData();
        data.append('my_file', $('#fileid').prop('files')[0]);
        $.ajax({
        url: 'ImageUpload.php',
        type: 'POST',               
        processData: false,
        contentType: false,
        data: data,
        success: function(data) {},
        error: function (error) {}
            });
        }
}