3

Como faço para mandar um formulário via $.post com um input tipo file onde o form tenha enctype="multipart/form-data"? Todos os outros campos fazem a inserção o problema que o arquivo não passo pois não ler como enctype="multipart/form-data".

1

1 Resposta 1

6

Resposta curta: não passa!

O método jQuery.post() "aka" $.post() foi desenhado para "carregar dados do servidor utilizando uma solicitação HTTP POST" os parâmetros do tipo String ou PlainObject são opcionais, embora estes parametros sirvam apenas para atender requisitos da solicitação é muito comum utilizá-los para enviar dados ao servidor más, não há suporte a multiparty/form-data neste método.

A estrutura deste método é a seguinte:

jQuery.post( url [, data ] [, success ] [, dataType ] )

Onde todos os parâmetros com exceção da url são opcionais. Documentação oficial.

Como fazer então?

Simples, utilize o método jQuery.ajax() "aka" $.ajax() que aceita inúmeras opções de configuração. Documentação oficial.

A estrutura do método $.ajax() segue a seguinte base:

jQuery.ajax( url [, settings ] )

Como podes notar o parâmetro de configurações (PlainObject) são opcionais más, não é necessário declarar explicitamente o primeiro argumento url caso você defina configurações e esta tenha (contenha) uma "url" exemplo:

$.ajax({
    url: 'https://awesomedomain.com'
})

Um exemplo completo:

<!DOCTYPE html>
<html>
<head>
    <title>Titulo</title>
</head>
<body>
    <form method="POST" enctype="multipart/form-data" id="fileUploadForm">
        <input type="text" name="extraField"><br><br>
        <input type="file" name="files"><br><br>
        <input type="file" name="files"><br><br>
        <input type="submit" value="Submit" id="btnSubmit">
    </form>

    <!-- load jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            // evento de "submit"
            $("#btnSubmit").click(function (event) {
                // parar o envio para que possamos faze-lo manualmente.
                event.preventDefault();
                // capture o formulário
                var form = $('#fileUploadForm')[0];
                // crie um FormData {Object}
                var data = new FormData(form);
                // caso queira adicionar um campo extra ao FormData
                // data.append("customfield", "Este é um campo extra para teste");
                // desabilitar o botão de "submit" para evitar multiplos envios até receber uma resposta
                $("#btnSubmit").prop("disabled", true);
                // processar
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: "/coolurl/upload",
                    data: data,
                    processData: false, // impedir que o jQuery tranforma a "data" em querystring
                    contentType: false, // desabilitar o cabeçalho "Content-Type"
                    cache: false, // desabilitar o "cache"
                    timeout: 600000, // definir um tempo limite (opcional)
                    // manipular o sucesso da requisição
                    success: function (data) {
                        console.log(data);
                        // reativar o botão de "submit"
                        $("#btnSubmit").prop("disabled", false);
                    },
                    // manipular erros da requisição
                    error: function (e) {
                        console.log(e);
                        // reativar o botão de "submit"
                        $("#btnSubmit").prop("disabled", false);
                    }
                });
            });
        });
    </script>
</body>
</html>

Outros tópicos similares aqui na comunidade:

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 .