Send input type file without using submit button

Question

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="xxxxxx@hotmail.com">xxxxxx@hotmail.com</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>

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.

Answer 1

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();    
         
       }
    });
}

Answer 2

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();     
        }
    });
    }
}