1

No facebook, eu perecebi que, ao selecionar uma imagem para colocar na postagem, eles enviavam uma requisição pelo método POST para uma URL lá(que deveria tratar de fazer o upload..)

Mas, o que estranhei, é que o conteúdo do post parecia com isso:

-----------------------------24055831728377 Content-Disposition: form-data; name="fb_dtsg" AQF_UrnMtkOL 
-----------------------------24055831728377 Content-Disposition: form-data; name="source" 8 
-----------------------------24055831728377 Content-Disposition: form-data; name="profile_id"..............

...

ÿØÿà�JFIF��`�`��ÿî�Adobe�d����ÿá]Exif��MM�*����2�������b;�������vGF�������GI�����?����������ê�������i�������}���ç2009:03:12 13:46:42�Corbis���������¿�������Ó����54������54��ê���´��������2008:03:14 13:59:26�2008:03:14 13:59:26���������������)������1������9�������������H������H���ÿØÿà�JFIF������ÿÛ�C� ...

..

e terminava com:

-----------------------------24055831728377 Content-Disposition: form-data; name="upload_id" 1024 
-----------------------------24055831728377--

Os caracteres estranhos ali seriam o que, o código da imagem? Nunca vi essa de enviar por POST uma imagem, como funciona isso?

6
  • 1
    Poderia colocar a linha completa onde aparecem os caracteres estranhos?
    – stderr
    Commented 22/03/2015 às 23:42
  • @Qmechanic73, Bah, é muito grande mesmo.. vou colocar um pouco mais, acredito que os caracteres em si não importam pra nós, acho que é código da imagem, que no final resulta nela ele por inteiro, mas não sei confirmar nada disso..
    – Ale
    Commented 23/03/2015 às 0:15
  • 1
    Isso é o base64 da imagem, provavelmente. Commented 23/03/2015 às 0:16
  • 1
    @AlexandreC.Caus, é muito comum em tecnologias web transmitir arquivos e dados segundo essa codificação, não estou dizendo que é esse o caso, mas parece muito ser... Um exemplo de como converter uma imagem para base64 Commented 23/03/2015 às 0:22
  • 1
    Acho que descobri, eu usei o file_get_contents() que eu observei no link que me enviou, e o código que gera é igual ao do POST no facebook(a parte estranha), ou seja, a imagem não foi codificada, aquele código todo ali é o conteúdo da imagem, agora resta a dúvida é, como eu recebo todo esse código na outra página e interpreto para ele virar uma imagem?
    – Ale
    Commented 23/03/2015 às 0:30

1 Resposta 1

1

Quando se vai enviar um arquivo para o servidor é necessário usar uma codificação que permita enviar dados binários juntamente com dados de formulário.

Normalmente um POST sem arquivos no formulário possui um corpo com o seguinte formato:

campo1=1234&campo2=Miguel&campo3=30

Esse formato é idêntico ao formato da query-string na URI.

Note que não seria possível enviar um arquivo binário com esse formato, a não ser que fosse transformado em algum formato de texto, tal como base-64. Mas esse não é o caso, pois base-64 ou qualquer outra codificação de texto iria sem dúvida aumentar o tamanho do request.

Para isso existe um formato de codificação que permite o envio de dados binários: multipart/form-data.

Codificação multipart/form-data

Essa codificação é que permite transmitir para o servidor os arquivos em formato binário mesmo. Está definida no protocolo HTTP 1.1 seção 3.7.2 Multipart Types (rfc1867).

O formato de codificação consta em gerar separadores aleatórios, e separar cada campo do formulário com esse separador.

Veja um exemplo de POST usando esta codificação: (exemplo deste site)

POST /diretorio/arquivo HTTP/1.0
Host: www.dominio.com.br
Content-type: multipart/form-data, boundary=AaB03x
Content-Length: 381

--AaB03x
content-disposition: form-data; name="campo1"

1234
--AaB03x
content-disposition: form-data; name="campo2"

Miguel
--AaB03x
content-disposition: form-data; name="arquivo1"; filename="minha-foto.jpg"
Content-Type: image/jpeg
Content-Transfer-Encoding: binary

ÿØÿà�JFIF��`�`��ÿî�Adobe�d����ÿá]Exif��MM�*����2�������b;�������vGF�������GI�����?������
--AaB03x--

Algumas regras de formação do conteúdo:

  1. Cabeçalho Content-type: deve ser multipart/form-data; boundary=$divisor-aleatorio substituindo o divisor aleatório por algo realmente aleatório e com chance quase 0 de se repetir no conteúdo do arquivo binário ou em qualquer campo enviado.

  2. Cabeçalho Content-Length: deve possuir o tamanho do request, contando desde o primeiro divisor (no exemplo anterior é--AaB03x), até o último caractere do terminador (``--AaB03x--)

  3. Para cada campo ou arquivo:

    1. adicionar o divisor
    2. adicionar cabeçalhos da divisão:
      • content-disposition: form-data
      • name="nome-do-campo-no-html"
      • se for arquivo:
        • filename="nome-do-arquivo-sendo-enviado": somente se for arquivo
        • Content-Type: image/jpeg: tipo mime do arquivo
        • Content-Transfer-Encoding: binary
      • pula uma linha, e então envia os dados
      • logo que terminar já vem outro divisor do próximo campo ou o terminador
    3. adicionar terminador

Submetendo form com multipart/form-data

No HTML, para indicar que deseja usar a codificação multipart/form-data, basta incluir na tag form o atributo enctype="multipart/form-data"

Documentação da tag form na MDN

Segundo a documentação da MDN, isso é necessário quando se usa um input com type="file".

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 .