How can i pass the file loaded using fileopen dialog in ajax request

Question

I am opening an image from fileopen dialog using jquery. I want send the ajax request to a php page to upload the image to database. How can i do it. I am using the following code to open the image

$("#imgup").on("click",function(){
                $('#imgfile').trigger('click');
                var data=$("#imgfile").val();
            });

And here is my code that is the place where the input dialog is present

<div id="profilepic">
                <img id="profileimg" src="getImage.php" width="100" height="100"/>
                <p style="margin-top: -20px;" id="imgchng"><a id="imgup" href="#">Change Image</a></p>
                <input id="imgfile" type="file"/>
            </div>

Can anyone help? Thanks in advance

Answer 1

you need to open profileimg id

 $("#imgup").on("click",function(){
                $('#profileimg').trigger('click');
                var data=$("#imgfile").val();
            });