How send input type file to image upload file using post method in javascript

Question

How send input type file to image upload file using post method in JavaScript? Blew is the form.

<form action="#" method="post" enctype="multipart/form-data" id="image_upload" name="image_upload">
    <input type="file" name="myFile" id="myFile" onchange="readURL(this);" required>
    <br>
    <img id="blah" src="#" alt="your image" />
    <input type="hidden" name="user_id" id="user_id" value="<?php echo $user_id; ?>">
    <input type="submit" value="Upload">
</form>

Here blow is JavaScript that I have used for post the Form.

$(document).ready(function(){ 
$('#image_upload').submit(function(e){
        e.preventDefault();

        $.post('getfile_provider.php',$('#image_upload').serialize(),function(data){
            alert(data);
        });

    });
}); 

When i send in this method i get in getfile_provider.php file only the user_id value.

Answer 1

You can use this to sending image file using post method

 var formData = new FormData($("#form")[0]);
            $.ajax({
                url: "getfile_provider.php",
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
            })
            .done(function(data) {
                alert('done');
            });