How to read image using input type=file and send this image as a POST request

Question

I am trying to read an image using HTML input of type = 'File'. After the user selects the file, i wish to make a POST request to a particular URL. This POST request should have the image selected by the user. I have looked into jQuery Ajax calls without any success. The link which I am trying to hit expects an image as byte array.

Answer 1

Try this:

html:

<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>

Jquery:

$('#upload').on('click', function() {
    var file_data = $('#pic').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);

    $.ajax({
            url         : 'upload.php',     // point to server-side PHP script 
            dataType    : 'text',           // what to expect back from the PHP script, if anything
            cache       : false,
            contentType : false,
            processData : false,
            data        : form_data,                         
            type        : 'post',
            success     : function(output){
                alert(output);              // display response from the PHP script, if any
            }
    });
});