I have the form to attach the document and the js to send the data to php as follows:

function update_estado()
{   
  var dadosajax = {
        'Fornecedor' : $("#Fornecedor3").val(),
        'arquivo': $("#arquivo").val(),
  }
  
  $.ajax({
      url: 'pedencom.php',
      type: 'POST',
      cache: false,
          data: dadosajax,
      error: function(){
        $(".error_message").removeClass('hide');
          swal("Erro!", "Tente novamente. Caso persista o erro, contatar Administrador!", "error");
      },
      success: function(result2)
       {
         $('.limp9')[0].reset();    
         
       }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="form" class="limp9" id="forarq" method="post" enctype="multipart/form-data">

 <div class="form-group col-md-3">  
    <select class="form-control1 spoiler4" name="Fornecedor" id="Fornecedor3" required>
     <option value="[email protected]">[email protected]</option>                     </select>
    <label class="label1" for="Fornecedor3">Email Fornecedor</label>        
 </div>
 <div class="row clearfix" style="margin-top: -1%;">
    <span class="btn fileinput-button" style="color: black;">
     <i class="glyphicon glyphicon-plus" style="color: black;"></i>
     <span style="color: black;">Add Arquivo...</span>
     <input type="file" class="form-control" style="height: 62%;" id="arquivo" name="arquivo">
  </span>
 </div>
 <div class="h4 mb-4" style="float:right; line-height: 2;">
  <button type="button" class="btn btn-raised btn-default ripple-effect" onclick="update_estado()">Gravar <i class="fa fa-paper-plane"></i></button>
 </div>
</form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The variable with the email sends, but the input type file variable is empty.

I want to send both variables without submitting by clicking the save button.

CodePudding user response：

you can do this

function update_estado()
{   
// here is my code
 var pedpront = [];
 $.each($("input[name='updorc1[]']:checked"), function(){ pedpront.push($(this).val()); });
  let formData = new FormData(document.querySelector("#forarq"))})  
// get the values here and insert in key value pair down below
formData.append("pedprontData",pedpront)
  $.ajax({
      url: 'pedencom.php',
      type: 'POST',
      cache: false,
          data:,formData
      error: function(){
        $(".error_message").removeClass('hide');
          swal("Erro!", "Tente novamente. Caso persista o erro, contatar Administrador!", "error");
      },
      success: function(result2)
       {
         $('.limp9')[0].reset();    
         
       }
    });
}

CodePudding user response：

You can use this function and keep in mind that reader.result is file content string base64encoded which means you need to decode it on server-side to get original content and save it.

function update_estado()
{ 
    var file = $('#arquivo')[0].files[0];
    var filename = file.name;
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload=function() {
    var dadosajax = {
        'Fornecedor' : $("#Fornecedor3").val(),
        'arquivo': reader.result,
    }
  
    $.ajax({
        url: 'pedencom.php',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){
            $(".error_message").removeClass('hide');
            swal("Erro!", "Tente novamente. Caso persista o erro, contatar Administrador!", "error");
        },
        success: function(result2)
        {
            $('.limp9')[0].reset();     
        }
    });
    }
}