How to submit the file on the same page without reloading

Question

I was trying to find the answer of the question "How to submit a file without reloading the tab" And i come to this thread Uploading file in a form without page refresh In this thread best answer is " use Hidden iframe". But if we use hidden iframe it may possible to submit form data to another file without refreshing the page. But how it is possible to submit file (using iframe) to the current file(page) without reloading. I am using

<form action="<?php echo $_SERVER["PHP_SELF"];?> enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit">
</form>

I think In my case we cant even use seralize() method.So how we can submit the file on same page without reloading it. I think iframe may not be solution.

Answer 1

Here I used jquery like this.. Your have to create the object of FormData

jQuery("body").on("beforeSubmit", "form#YOUR_FORM_ID", function() {
            var form = jQuery(this);
            jQuery.ajax({
                url: form.attr("action"),
                type: "POST",
                data: new FormData(this),
                processData: false,
                contentType: false,
                async: false,
                success: function(response) {
                    if (response) {
                      //your response 
                    }
                },
                error: function() {
                    console.log("internal server error");
                }
            });
            return false;
        });