Upload de arquivos com Ajax XMLHttpRequest: solução de problemas do erro "No Multipart Boundary Found"

Ao tentar fazer upload de um arquivo usando XMLHttpRequest, você pode encontre um erro como "A solicitação foi rejeitada porque nenhum limite multipartes foi encontrado." Esse problema surge quando o arquivo não é enviado corretamente como uma solicitação multipart/form-data.

Um erro comum é anexar o arquivo diretamente ao objeto XMLHttpRequest, conforme mostrado no código:

xhr.file = file; // not necessary if you create scopes like this

Este método está incorreto. Em vez disso, o arquivo deve ser agrupado em um objeto FormData, que constrói a carga útil adequada da solicitação multipart/form-data:

var formData = new FormData();
formData.append("thefile", file);

Depois que o arquivo for adicionado ao objeto FormData, você pode usar xhr.send(formData); para enviar a solicitação. O arquivo estará acessível no lado do servidor em $_FILES['thefile'] se estiver usando PHP.

Lembre-se de que você pode consultar recursos como MDC e demos do Mozilla Hack para obter mais orientações sobre uploads de arquivos com Ajax XMLHttpRequest.