2

Eu preciso passar mais duas variáveis pelo ajax, eu tentei fazer da seguinte forma:

JS:

var usuario_cod = document.getElementById("usuario_cod");
var line_cod = document.getElementById("line_cod");
...
$.ajax({

 url: "envio_anexo_processo.php",
 type: "POST",
 data: {'usuario_cod':usuario_cod,'line_cod':line_cod,formdata,},
...

HTML:

<fieldset>

    <div id="container" style="margin-top:50px;">

        <div class="col-sm-offset-2 col-sm-8">

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h3 class="panel-title">Enviar arquivos em PDF</h3>

                </div>

                <div class="panel-body">

                    <form method="post" enctype="multipart/form-data"  action="/process_files.php">

                        <input type="file" name="files[]" id="input_files" multiple />

                        <input type="hidden" id="usuario_cod" name="usuario_cod" value="<?php echo mb_strtoupper ($usuario_cod);?>">

                        <input type="hidden" id="line_cod" name="line_cod" value="<?php echo mb_strtoupper ($line_cod);?>">
    
                        <button type="submit" id="btn_submit" class="form-control">Enviar Arquivos!</button>

                    </form>

                    <br />

                    <div id="loading_spinner"><i class="fa fa-spinner fa-pulse"></i> Enviando</div>

                    <div id="result"></div>

                </div>

            </div>

        </div>

    </div>

</fieldset>

<script type="text/javascript">

    function TransferCompleteCallback(content){
        // we might want to use the transferred content directly
        // for example to render an uploaded image
    }

    $( document ).ready(function(){

        var input = document.getElementById("input_files");
        var formdata = false;

        if(window.FormData){

            formdata = new FormData();
            $("#btn_submit").hide();
            $("#loading_spinner").hide();

        }

        $('#input_files').on('change',function(event){

            var i = 0, len = this.files.length, img, reader, file;
            //console.log('Number of files to upload: '+len);
            $('#result').html('');
            $('#input_files').prop('disabled',true);
            $("#loading_spinner").show();

            for( ; i < len; i++ ){

                file = this.files[i];
                //console.log(file);
                if(!!file.name.match(/.*\.pdf$/)){

                    if ( window.FileReader ){

                        reader = new FileReader();
                        reader.onloadend = function(e){ 

                            TransferCompleteCallback(e.target.result);

                        };

                        reader.readAsDataURL(file);

                    }

                    if (formdata){

                        formdata.append("files[]", file);

                    }

                } else{

                    $("#loading_spinner").hide();
                    $('#input_files').val('').prop('disabled',false);
                    alert(file.name+' Não é um PDF');

                }

            }

            var usuario_cod = $('#usuario_cod').val();

            if (formdata){

                $.ajax({
                    
                    url: "envio_anexo_processo.php",
                    type: "POST",
                    data: formdata,
                    processData: false,
                    contentType: false, // this is important!!!

                    success: function (res){

                        //alert(data);

                        var result = JSON.parse(res);
                        $("#loading_spinner").hide();
                        $('#input_files').val('').prop('disabled',false);

                        if(result.res === true){

                            var buf = '<ul class="list-group">';

                            for(var x=0; x<result.data.length; x++){

                                buf+='<li class="list-group-item">'+result.data[x]+'</li>';

                            }

                            buf += '</ul>';
                            $('#result').html('<strong>Arquivos enviados:</strong>'+buf);

                        } else{

                            $('#result').html(result.data);

                        }

                        // reset formdata
                        formdata = false;
                        formdata = new FormData();

                    }

                });

            }

            return false;

        });

    });

</script>

Não funcionou, como eu faço pra enviar duas variáveis?

1
  • Se você for iniciante, seria uma boa alternativa ver uma biblioteca chamada "Axios" github.com/axios/axios Se ajudou, vote como a resposta escolhida : ) Commented 24/09/2020 às 12:33

3 Respostas 3

1

Como você está enviando um formData, para realizar o upload do arquivo, você precisa adicionar essas duas variáveis dentro dele. Pode fazer da seguinte forma:

var usuario_cod = document.getElementById("usuario_cod");
var line_cod = document.getElementById("line_cod");
...

formdata.append('usuario_cod', usuario_cod)
formdata.append('line_cod', line_cod)

$.ajax({

 url: "envio_anexo_processo.php",
 type: "POST",
 data: formdata,
...

Dessa forma seria como se o seu form tivesse dois outros Inputs dentro dele.

0

Então vamos lá, vou dividir a resposta em duas partes

Primeira:

Para o envio do ajax vamos usar um formato chamado JSON, para ele ser valido precisamos de algumas coisas

Ele deve estar entre { }

{

}

As propriedades devem ser separadas por ,

{
   propriedade: "Valor1",
   propriedade2: "Valor2"
}

E o ultimo elemento não pode ter virgula

{
   propriedade: "Valor1",
   propriedade2: "Valor2"
}

Referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Segunda:

Tendo isso em mente, teríamos que mudar algumas coisinhas

var usuario_cod = document.getElementById("usuario_cod");
var line_cod = document.getElementById("line_cod");
...

let AjaxRequest = { 
   usuario_cod: usuario_cod,
   line_cod   : line_cod
}
$.ajax({

 url: "envio_anexo_processo.php",
 type: "POST",
 data: AjaxRequest,
...

Referencias: https://www.w3schools.com/jquery/jquery_ajax_get_post.asp

0

Alternativamente, pode usar o Método serialize() - esta método elimina a necessidade de armazenar dados, um a um em variáveis, fazendo este processo automaticamente e simplificadamente.

Este método destina-se a coletar os valores entrados pelo usuário em campos de formulário e transformá-los em formato de string.

A serialização de dados é feita com o objetivo de estruturar os dados de uma forma apropriada, para serem enviados ao servidor. O formato de serialização é compatível e aceito pela maioria das linguagens de programação no lado do servidor, bem como pelos frameworks.

Para que o método serialize() funcione, é necessário que os campos de entrada dos dados a serem serializados sejam marcados com o atributo name.

JS

var serializeDados = $('#idForm').serialize();

$.ajax({

 url: "envio_anexo_processo.php",
 type: "POST",
 data: serializeDados,
...

HTML

<form id="idForm" .....

PHP algo assim

$usuario_cod = strip_tags($_POST['usuario_cod']); 
$line_cod = strip_tags($_POST['line_cod]); 


Veja um exemplo com o método serialize()

$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("#idForm").serialize());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="idForm" action="">
<input type="hidden" id="usuario_cod" name="usuario_cod" value="Codigo_123">

<input type="hidden" id="line_cod" name="line_cod" value="Linha_456">
    
</form>

<button>Serialize values do formulário</button>

<div></div>

2
  • Eu tentei desse jeito ai mas não ta funcionando quando coloca o arquivo pdf pra ir junto. Eu preciso enviar o pdf + as duas variáveis. <input type="file" name="files[]" id="input_files" multiple />
    – user192882
    Commented 24/09/2020 às 17:53
  • @gabrielb3rn, entendi, eu só vi você perguntando "como eu faço pra enviar duas variáveis?" e o JS
    – user60252
    Commented 24/09/2020 às 20:38

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