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.

possible duplicate of How to upload file through Jquery/AJAX — Jigar
– Jigar, Commented Aug 6, 2015 at 6:47

Saty · Accepted Answer · 2015-08-06 07:35:30Z

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');
            });

edited Aug 6, 2015 at 7:35

answered Aug 6, 2015 at 6:44

Saty

22.5k7 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sanji Over a year ago

This img tag is show Image after file load. But i have tried after you comments. Still is not parsing the value from File load.

Saty Over a year ago

@sanji its my mistake please check my updated answer!!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related