FormData é uma introdução detalhada e uso https://developer.mozilla.org/zh ... ng_FormData_Objects
Os métodos e eventos do FormData já são muito claros lá, então não vou perder tempo com eles aqui. Este artigo explica principalmente o uso de objetos FormData e uploads de arquivos assíncronos.
O objeto FormData nos permite organizar uma coleção de pares-chave-valor enviados usando o objeto XMLHttpRequest. Ele é usado principalmente para enviar dados de formulários, mas pode ser usado independentemente dos dados transferidos por meio de formulários.
1. Criar um objeto FormData do zero
Você pode criar seu próprio objeto FormData e então adicionar pares-chave-valor ao objeto pelo método append(), assim:
Nota: Tanto os campos "userfile" quanto "webmasterfile" contêm arquivos. O número atribuído ao campo "accountnum" é convertido diretamente em uma string pelo método FormData.append() (o valor do campo pode ser um blob, arquivo ou uma string: se o valor não for nem blob nem arquivo, o valor é convertido em uma string).
2. Obter um objeto FormData de um formulário HTML
Para obter um objeto FormData contendo dados de formulário existentes, você precisa especificar o elemento de formulário ao criar o objeto FormData.
Assim:
Você também pode adicionar dados adicionais após obter o objeto FormData, como este:
Isso permite adicionar informações adicionais antes de enviar, não necessariamente editadas pelo usuário.
3. Use o objeto FormData para enviar o arquivo
Você pode usar o FormData para enviar arquivos. Um <form>terceiro simples pode <input>incluir um elemento:
Você pode então usar o seguinte código para enviá-lo:
Você também pode adicionar um Arquivo ou Blob diretamente ao objeto FormData, assim:
Ao usar o método append(), um terceiro parâmetro pode ser usado para enviar o nome do arquivo (enviado ao servidor via cabeçalho Content-Disposition). Se o terceiro parâmetro não for especificado ou esse parâmetro não for suportado, o terceiro parâmetro é "blob" por padrão.
Se você definir as opções corretas, também pode usá-lo com o jQuery:
|
Publicado em 08/05/2018 16:30:39
|
|
|
