AJAX formData不起作用

Question

I'm struggling with formData in Ajax calls. I read everything I could with the same information, tried get the form with this, getElementById and nothing works (even tried several solutions from SO).

I have a form with id add-lang-form:

<form class="js-validation-addlang" method="post" enctype="multipart/form-data" id="add-lang-form" name="add-lang-form">
  <div class="form-group row">
    <label class="col-6 col-form-label">Language Name</label>
    <label class="col-6 col-form-label">Language Code</label>
    <div class="col-md-6">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_name" name="lang_name">
        <span class="input-group-addon"><i class="fa fa-file"></i></span>
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_code" name="lang_code">
        <span class="input-group-addon"><img src="/assets/img/flags/def.png" id="flag-icon"/></i></span>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-12" for="lang_tags">Language Tags</label>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_tags" name="lang_tags">
        <span class="input-group-addon"><i class="fa fa-list"></i></span>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-12">Image</label>
    <div class="col-md-12">
      <input type="file" id="lang_img" name="lang_img" class="dropify" />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-12">
      <button type="submit" class="btn btn-alt-primary pull-right">Submit</button>
    </div>
  </div>
</form>

And I have a function that is called after form validation with submitHandler:

function AddLang(e) {
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
  var form = document.getElementById('add-lang-form');
  var formData = new FormData(form);
  $.ajax({
    url: 'PHP_FILE',
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    cache: false,
    data: {
      dados: formdata,
      caller: 'addlang',
    },
    type: 'POST',
    beforeSend: function() {
      $("#login_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
      $("#login_btn").attr("disabled", true);
    },
    success: function(output) {
      if (output == "OK") {
        alert("OK");
      } else {
        alert(output);
      }

    }
  });
};

I tried creating the formData directly, everything and nothing works. The $_POST['dados'] is not set. Any clue of whats going on?

Answer 1

you can't use a FormData object as the value of a parameter, it has to be the entire data: value. If you want to add additional parameters, use FormData.append().

function AddLang(e) {
  //var data = $("#add-lang-form").serialize();
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
  var form = document.getElementById('add-lang-form');
  var formData = new FormData(form);
  formData.append('caller', 'addlang');

  $.ajax({
    url: 'PHP_FILE',
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    cache: false,
    data: formData,
    type: 'POST',
    beforeSend: function() {
      $("#login_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
      $("#login_btn").attr("disabled", true);
    },
    success: function(output) {
      if (output == "OK") {
        alert("OK");
      } else {
        alert(output);
      }

    }
  });
};

</div>