Как прочитать файл, размещенный с помощью FormData через ajax

Question

Я пытаюсь проверить, правильно ли опубликован файл из моей формы, но все, что я пытаюсь отобразить / распечатать, отображается пустым.

Это моя форма:

<form id="employeeformadd" method="post" enctype="multipart/form-data">
  <div class="row">
    <div class="col-md-6">
      <div class="card m-b-20">
          <div class="card-body">
            <input type="hidden" name="id_company" value="<?PHP echo $getbedrijfinfo['id']; ?>">
          </div>
      </div>
    </div>
    <div class="col-md-6">
    <div class="card m-b-20">
        <div class="card-body">
          <div class="form-group row">
              <label for="example-text-input" class="col-sm-4 col-form-label">Kopie rijbewijs</label>
              <div class="col-sm-8">
                <form action="#">
                    <div class="form-group">
                        <input id="copy_driverslicense" type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
                    </div>
                </form>
              </div>
          </div>
          <div class="form-group row">
              <label for="example-text-input" class="col-sm-4 col-form-label">Kopie paspoort</label>
              <div class="col-sm-8">
                <form action="#">
                    <div class="form-group">
                        <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
                    </div>
                </form>
              </div>
          </div>
          <div class="form-group row">
              <label for="example-text-input" class="col-sm-4 col-form-label">Kopie medische geschiktheidsverklaring</label>
              <div class="col-sm-8">
                <form action="#">
                    <div class="form-group">
                        <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
                    </div>
                </form>
              </div>
          </div>
          <div class="form-group row">
              <label for="example-text-input" class="col-sm-4 col-form-label">Diploma</label>
              <div class="col-sm-8">
                <form action="#">
                    <div class="form-group">
                        <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
                    </div>
                </form>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Иэто мой jquery:

$("body").on("click","#addemployeebtn",function(){
    var form = $(this);
    var formdata = false;
    if (window.FormData){
        formdata = new FormData(form[0]);
    }

    var formAction = form.attr('action');
    $.ajax({
        url         : 'includes/addemployee.php',
        data        : formdata ? formdata : form.serialize(),
        cache       : false,
        contentType : false,
        processData : false,
        type        : 'POST',
        success     : function(data, textStatus, jqXHR){
            // Callback code
        }
    });
});

И в моем php-скрипте я пробовал следующие вещи:

echo = $_FILES['filename'];
echo $_POST['file'];
print_r($_FILES);
echo $_FILES['file'];
echo $_FILES['files']['name'][0];

Но все они пусты, когда я их отображаю / выводим на печать.

Если я смотрю в сети, я вижу, что форма опубликована, поэтому мой javascript работает.

Answer 1

сначала вы должны заменить $ ("body"). On ("click", "# addemployeebtn", function () на $ ("body"). On ("submit", "# employeeformadd", function()

, поэтому, когда вы пишете var form = $ (this), объект формы ссылается на форму #employeeformadd, а не на #addemployeebtn кнопку отправки

, а во-вторых, вы должны дать имя каждому входному файлу дляпример

так что в php вы можете получить к нему доступ, написав $ _FILES ['diploma'];

и, наконец, вы должны удалить ненужный тег формы в html, например

Answer 2

Я думаю, что проблема в том, что вы связываете событие click с кнопкой $("body").on("click","#addemployeebtn",function(){ НО, ссылаясь на $(this) объект как форму, выполняя var form = $(this);.

Так что вы либо привязываете submit событие с идентификатором формы или ссылка на объект формы с идентификатором формы var form = $('#employeeformadd');.

Кроме того, вам необходимо удалить все вложенные формы в основной форме <form action="#"> и не забудьте удалить их закрытиетеги тоже </form>.

Наиболее важно:

Добавьте name="fieldname" в поле вашего файла, например, <input id="copy_driverslicense" type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary" name="photo1">