Faça upload de uma imagem usando Ajax e FormData

Usando esta função, você pode fazer upload de uma imagem através do objeto FormData, disponível no XMLHttpRequest Nível 2, ele usa o mesmo formato que um formulário usaria se o tipo de codificação fosse definido como “multipart / form-data”.

a função procura por uma entrada [tipo = arquivo] e obtém os dados nela. Se for uma imagem, crie um objeto FormData e envie o XMLHttpRequest. Assim que a solicitação for bem-sucedida, chama uma função de retorno de chamada que você pode implementar.

function upload(callback) {
    //get the input and the file
    var input = document.querySelector('input[type=file]'),
    file = input.files[0];

    //if the file isn't a image nothing happens.
    //you are free to implement a fallback
    if (!file || !file.type.match(/image.*/)) return;

    //Creates the FormData object and attach to a key name "file"
    var fd = new FormData();
    fd.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "URL TO YOUR  FILE HANDLER SERVICE");
    xhr.onloadend = function(e) {
        //The response of de upload
        xhr.responseText;
        if(callback) {
        callback();
    }
}