Upload only with jQuery.ajax and PHP

Asked

Viewed 1,561 times

2

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?

1 answer

2


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']
  • How do you send some information together, for example I need to send a code. Then I can do data: {cod: '123', file: seuArquivo}?

  • And how will I receive this file with PHP?

  • @Kaduamaral I suppose it is possible yes, but as I use this code to send files to Amazon S3 I do not know the server side implementation. I use exactly this code to do multi-part upload in my application

  • 1

    Thanks @renatoargh, I studied here a little bit and performed some tests and managed to use its implementation. It helped me a lot. I completed your reply with the information I needed.

  • I’m glad I could help!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.