如何从文件输入中读取文件内容？

Question

我正在尝试使用AJAX将文件内容从输入文件发送到PHP。当我第一次提交时，file_content为空，但是在随后的所有提交事件中（没有重新加载页面）它都包含文本。它应该从第一次点击开始。我该如何解决这个问题？

<form id="form_file_ajax">
  <div class="row">
    <div class="col-md-6">
      <div class="panel-flat">
        <div class="form-group">
          <div class="row">
            <div class="col-md-12">
              <input type="file" class="file-styled" id="file" accept=".txt" required>
            </div>
          </div>
        </div>
        <div class="text-right">
          <button type="submit" id="btn_submit" class="btn btn-primary">Send<i class="icon-upload position-right"></i></button>
        </div>
      </div>
    </div>
  </div>
</form>

var file_content = '';  

$('#form_file_ajax').on('submit', function(e) {
  e.preventDefault();
  var file = $('input[type=file]')[0].files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    file_content = reader.result;
  }

  reader.readAsText(file);
  alert(file_content);

  //Send data to server
  var formData = new FormData();
  formData.append('file', $('input[type=file]')[0].files[0]);
  formData.append('id_project', <?= $id_project ?>);
  formData.append('file_content', file_content);


  $.ajax({
    type: 'POST',
    url: '<?= $url_post_file ?>',
    data: formData,
    dataType: 'JSON',
    processData: false,
    contentType: false,
    success: function(data) {
      console.log(data.msg);
    },
    error: function(error) {
      console.log(error.responseText);
    }
  });
});