Загрузка файла с AJAX не работает должным образом "Uncaught ReferenceError"

Question

Эта ошибка появилась на консоли:

Uncaught ReferenceError: uploadedCAPA is not defined
    at HTMLButtonElement.<anonymous> (profile:521)
    at HTMLButtonElement.dispatch (afd.js:1)
    at HTMLButtonElement.m.handle (afd.js:1)

Я хочу отправить запрос POST на http://localhost/cakes/process.php, когда нажимаю $("#upload"), но я получаю эту ошибку uploadedCAPA is not defined почему?

мой код:

function showLoading() {
  document.getElementById('loading').style = 'visibility: visible';
}
function hideLoading() {
  document.getElementById('loading').style = 'visibility: hidden';
}
$('#upload').click(function() {
  //call show loading function here
  showLoading();
  $.ajax({
    type: 'POST',
    url: 'http://localhost/cakes/process.php',
    enctype: 'multipart/form-data',
    data: {
      file: uploadedCAPA
    },
    success: function() {
      //call hide function here
      hideLoading();
      alert('Data has been Uploaded: ');
    },
    error: function(a) {
      //if an error occurs
      hideLoading();
      alert(
        'An error occured while uploading data.\n error code : ' + a.statusText
      );
    }
  });
});

HTML:

<form method="post" enctype="multipart/form-data">
  <input id="capaUpload" type="file" name="uploadedCAPA" />
  <button type="button" id="upload" name="sendImg">Upload</button>
</form>

PHP:

if (isset($_POST['sendImg'])) {
  move_uploaded_file(
    $_FILES['uploadedCAPA']['tmp_name'],
    'user/7c50b2fe-1003-11e9-a766-c89cdc4e9f5f/avatar/'.$_FILES['uploadedCAPA'][
      'name'
    ]
  );
}

Answer 1

В вашем коде выше компилятор javascript ищет переменную с именем uploadedCAPA
data: {file: uploadedCAPA} в этой части, которую вы никогда не определяли ни в глобальной области видимости, ни в локальной переменной.

если вы хотите загружать файлы, используя javascript и jquery, вы должны сначала получить все ваши файлы в форме FormData. Для получения всех ваших файлов используйте метод new FormData (), предоставленный javascript.

Как это

const files = document.querySelector('[type=file]').files;
const formData = new FormData();
formData.append('file',files);

и тогда в данных вызова ajax будет formData Как эти данные: formData вместо данных: {file: uploadedCAPA};

Answer 2

Вы пытаетесь сослаться на переменную с именем uploadedCAPA, но нигде не определяете эту переменную.

Если вы просто хотите опубликовать содержимое формы, чтобы включить файл ввода, то я думаю, что вы ищете FormData. Возможно, что-то вроде этого:

let formData = new FormData(document.querySelector('form'));
$.ajax({
     url: 'http://localhost/cakes/process.php',
     type: 'POST',
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     success: function () { /.../ },
     error: function () { /.../ }
})

Опции contentType и processData здесь также актуальны для загрузки multipart/form-data с помощью jQuery. Но в целом суть в том, что вы не можете просто использовать имя элемента ввода в качестве переменной, вам нужно захватить данные из формы и отправить их на сервер.

Вы также можете использовать что-то более конкретное, чем document.querySelector('form'), чтобы идентифицировать элемент формы. Может быть, дать ему id и использовать вместо него document.getElementById.