2

Gostaria de saber se é possível fazer upload de um arquivo utilizando apenas $.ajax({...}) sem realizar submit do formulário e se for, como?

Obs.: Gostaria de colocar esse script no evento onchange.
Obs2.: Se possível não quero enviar todo o formulário, apenas o arquivo junto com um código de associação.

Exemplo:

$(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*/}
      });
      
   }
});

Enviaria o formulário apenas na hora de salvar outros dados. O input do arquivo está dentro do formulário, e gostaria de não precisar tira-lo de dentro e criar outro.


Editado

Como enviar e receber esses dados com PHP?

1 Resposta 1

2

É possível sim, usando a File API do HTML5 você pode fazer isso aqui;

OBS.: Exemplo com direito a barra de progresso

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
});

A variavel seuArquivo do exemplo acima você pode obter com o File API do HTML5, ela é um BLOB, aqui na documentação da MDN tem vários exemplos!

Basicamente você obtem este blob assim;

document.getElementById("uploadInput").files

Ou no seu caso;

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

Update (Recebendo arquivos e dados adicionais)

É possível receber o arquivo pelo método PUT, conforme na documentação do PHP:

<?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);
?>

Para enviar informações sobre o arquivo e outros dados envie pelo cabeçalho na instrução ajax:

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

E receba assim no PHP:

$headers = getallheaders();
// $headers['file-type']
// $headers['file-name']
// $headers['file-size']
// $headers['info-adicional']
5
  • Como faz pra enviar algumas informações juntas, por exemplo eu preciso enviar um código. Daí posso fazer data: {cod: '123', file: seuArquivo}?
    – KaduAmaral
    Commented 9/12/2014 às 12:25
  • E como vou receber esse arquivo com o PHP?
    – KaduAmaral
    Commented 9/12/2014 às 12:48
  • @KaduAmaral eu suponho que seja possível sim, mas como eu uso esse código para enviar arquivos para o Amazon S3 eu desconheço a implementação server side. Eu uso exatamente esse código para fazer multi-part upload na minha aplicação Commented 9/12/2014 às 12:53
  • 1
    Valeu @renatoargh, estudei aqui um pouquinho e realizei alguns testes e consegui usar sua implementação. Me ajudou muito. Completei sua resposta com as informações que eu precisei.
    – KaduAmaral
    Commented 23/12/2014 às 17:30
  • Fico feliz em ter ajudado! Commented 23/12/2014 às 18:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .