Upload only with jQuery.ajax and PHP

Question

I wonder if it is possible to upload a file using only $.ajax({...}) unfulfilled Submit of the form and if so, how?

Note: I would like to put this script in the event onchange.
Note 2: If possible I don’t want to send the whole form, only the file along with an association code.

Example:

$(this).on('change', '#image-file', function(event) {
   event.preventDefault();
   if ($(this).val() != ''){
      $.ajax({
         url: '<?=SITE_URL?>upload',
         type: 'POST',
         data: {file: $(this).val(), codigo: '123'},
         success: function(data){/*callback de sucesso*/}
      });
      
   }
});

Send the form only when saving other data. The input file is inside the form, and would like not need to take it from within and create another.

---

Edited

How to send and receive this data with PHP?

Answer 1

It is possible yes, using the HTML5 File API you can do it here;

OBS.: Example with progress bar

var percentageSent = 0;
$.ajax({
    type: 'PUT', //ou POST se for seu caso
    crossDomain: true, //true ou false, depende da sua necessidade
    url: 'http://exemplo.com/',
    processData: false,
    headers: {
        'x-foo': 'bar', //só se voce precisar
    },
    data: seuArquivo, //Veja a explicação abaixo
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();

        if(myXhr.upload){
            myXhr.upload.addEventListener('progress', function(e) {
                if(e.lengthComputable) {
                    var percentageSent = (e.loaded / seuArquivo.size);

                    $('#progress').html(percentageSent * 100 + '%');
                }
            }, false);

            myXhr.upload.addEventListener('load', function(e) {
                //Terminou de enviar esta parte
            }, false);
        }

        return myXhr;
    },
}).done(function(data, textStatus, jqXHR) {
    var etag = jqXHR.getResponseHeader('etag'); //caso voce precisa da etag
}).fail(function() {
    //algo deu errado
});

The variable seuArquivo from the above example you can get with the HTML5 File API, it is a BLOB, here at MDN documentation has several examples!

Basically you get this blob so;

document.getElementById("uploadInput").files

Or in your case;

...
data: $(this).get(0).files[0]
...

---

Update (Receiving additional files and data)

It is possible to receive the file by the method PUT, as in PHP documentation:

<?php
/* PUT data comes in on the stdin stream */
$putdata = fopen("php://input", "r");

/* Abre o arquivo para escrita (No caso cria ele, e escreve o que está sendo recebido) */
$fp = fopen("myputfile.ext", "w");

/* Lê 1kb de dados por vez
   e escreve no arquivo */
while ($data = fread($putdata, 1024))
  fwrite($fp, $data);

/* Fecha os streams */
fclose($fp);
fclose($putdata);
?>

To send information about the file and other data please send by header in the instruction ajax:

headers: {
   'file-type': seuArquivo.type, //só se voce precisar
   'file-name': seuArquivo.name,
   'file-size': seuArquivo.size,
   'info-adicional' : 'Foobar'
}

And get it in PHP:

$headers = getallheaders();
// $headers['file-type']
// $headers['file-name']
// $headers['file-size']
// $headers['info-adicional']