I want to upload image using ajax
<p>I want to upload image using ajax I got the following code from the internet: <a href="https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously">How can I upload files asynchronously?</a></p>

<pre><code>&lt;script&gt;
$(function(){
      $("#imgfile").on("click", function(){
      alert("hello");
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: 'imageupload.php',  
            type: 'POST',
            xhr: function() {  
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ 
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); 
                }
                return myXhr;
            },
            success: function(data){
               alert(data);

            },
            error: function(){
              alert("error check it");
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
      });
   &lt;/script&gt;
</code></pre>

<p>and the html</p>

<pre><code>&lt;input id="imgfile" type="file" name="imgfile"&gt;
</code></pre>

<p>I want the script to be executed when the user selects the image and ready to be processed. I don't want separate upload button. I tried and failed. </p>