Submit was fired multiple times

Submit was fired multiple times

Hi, 

I am working on building a div where people can drag and drop files in the box. The code will upload it to the server automatically. I am trying to understand the cause of malfunctioning of the following code. 

The pink background bold blue color font part of the code was fired 8 thousand times. Can you help me understand this?  also, how I can get it fire only once? 


Thank you!
Jing Jing
----------------------------------------------------------------------------------------------------------------------------------------

// HTML code
<div class="uploadbox" ondragover="Upload(this);" >
      <div class="fileinput">
            <input class="file" type="file" id="cur_file" />
            <label>Upload images for the curriculum.</label><br />
            <label for="cur_file">Choose a file<span class="filedragndrop"> or drag it here</span>.</label>
            <button type="submit" class="filebutton" />
      </div>
      <div class="fileuploading">Uploading&hellip;</div>
      <div class="fileerror"></div>
</div>


// jQuery code
function Upload(src) {
    var $form = $(src);
    var $input = $form.find('input[type=file]');
    var droppedFiles;

    $form.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
        e.preventDefault();
        e.stopPropagation();
    })
    .on('dragover dragenter', function () { $form.addClass('is-dragover'); })
    .on('dragleave dragend drop', function () { $form.removeClass('is-dragover'); })
    .on('drop', function (e) {
        if ($form.hasClass('is-uploading')) return false;
            
        droppedFiles = e.originalEvent.dataTransfer;
        $form.trigger('submit');
    })
    .on('submit', function (e) {
        $form.addClass('is-uploading').removeClass('is-success').removeClass('is-error');
        alert('a');
    });
}