How to send input file type via javascript in joomla modules

Question

I want to send javascript file to php file.
I have this form in my php file

<form action="" method="post" enctype="multipart/form-data">
   <label for="file">Filename:</label>
   <input type="file" name="file" id="file1"><br>
   <p id="poi">upload</p>
   <p id="plo"></p>
</form>

and white this code in js file

jQuery(document).on("click","#poi",function(){
   var objfile=new FormData();
   var file=jQuery("#file1").get(0).files[0];
   objfile.append("iefile078",file);

   var ajax ;
   ajax.upload.addEventListener("progress" ,progresshandler ,false);
   function progresshandler(){
      jQuery("#plo").text("uploading ....");
   }
   ajax.open("POST","helper.php");
   ajax.send(objfile);
});

when I click "upload" on my page, this function works correctly.
I want to show the user when the download progresses "uploading ....".
In addition, I want to send this file to the helper.php file.
how to set the attribute of the open () and send () functions in this case to transfer the file loaded in helper.php?
this is my file structure and my form place in the default.php file

js
    jquery.js
tmpl
    default.php
helper.php
mod_upload.php
mod_upload.xml

Answer 1

:

$(document).on("click","#poi", function(e) {
    e.preventDefault();
    var formData = new FormData($(this)[0]);

    $.ajax({
        url: 'helper.php',
        type: 'POST',
        data: formData,
        async: false,
        beforeSend: function() {
            $("#message1").show().html("uploading...");
        },
        success: function(data) {
            $("#message1").fadeOut();
            $("#container").html(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });
});