Асинхронная загрузка файла с использованием чистого JS/AJAX и PHP ⇐ Php

[Anonymous]

ОБНОВЛЕНИЕ (16:35 MST, вторник, 29 октября 2024 г.)
=====
Я изменил однофайловый код куда:

Код: Выделить всё

bool_asnyc = 1;





Select file to upload:


if (bool_asnyc) document.write("Upload File (async)");
else document.write("Upload File (sync)");




async function uploadFile(e) {
//e.preventDefault();

const files = document.querySelector('input[name="fileToUpload"]').files;
let formData = new FormData();
formData.append("file", files[0]);
await fetch(
'upload.php',
{
method: "POST",
body: formData
}
); // await fetch(
alert("some useless message");

} // async function uploadFile()

document.querySelector("form").addEventListener('submit', uploadFile);

Когда bool_asnyc = 1;, как указано выше, код должен загрузить файл асинхронно и записать файл, содержащий var_export $_FILES, но не делает ни того, ни другого.
При загрузке страницы выдает кучу ошибок:

Код: Выделить всё

Warning: Undefined array key "fileToUpload" in /opt/homebrew/var/www/pjamesnorris/php/upload-working.php on line 6

Warning: Trying to access array offset on null in /opt/homebrew/var/www/pjamesnorris/php/upload-working.php on line 6

Warning: Undefined array key "fileToUpload" in /opt/homebrew/var/www/pjamesnorris/php/upload-working.php on line 11

Warning: Trying to access array offset on null in /opt/homebrew/var/www/pjamesnorris/php/upload-working.php on line 11

Deprecated: move_uploaded_file(): Passing null to parameter #1 ($from) of type string is deprecated in /opt/homebrew/var/www/pjamesnorris/php/upload-working.php on line 11

Failure

$str_export = array ( )

и записывает 9-байтовый текстовый файл -working.txt:

Код: Выделить всё

array (
)

чего и следовало ожидать, поскольку я не выбрал файл для загрузки при загрузке страницы.
Итак, я знаю только из этого JS и PHP работают в некоторой степени так, как должны.
Но когда я нажимаю «Загрузить файл (асинхронно), выбранный файл не загружается, и var_export файл [selected_file_name]-working.txt не записывается.
А когда bool_asnyc = 0;, все работает как надо. То есть, когда страница загружается, я получаю те же сообщения об ошибках, что и файл var_export -working.txt.
Но когда я выбираю файл и нажимаю «Загрузить» Файл (синхронизация), выбранный файл загружается и записывается файл var_export [selected_file_name]-working.txt , например, при выборе файла Basic Deduction Rules.png, Basic+Deduction+Rules.png-working.txt содержит:

Код: Выделить всё

array (
'fileToUpload' =>
array (
'name' => 'Basic+Deduction+Rules.png',
'full_path' => 'Basic+Deduction+Rules.png',
'type' => 'image/png',
'tmp_name' => '/private/var/folders/y4/h4q5l_w10175pdvjdlswx7vr0000gn/T/php39Gci5',
'error' => 0,
'size' => 88304,
),
)

Единственное, что бросается в глаза, это то, что при синхронной загрузке файла JS не отображает предупреждение о каком-то бесполезном сообщении, где как когда я пытаюсь загрузить файл асинхронно, JS отображает предупреждение о каком-то бесполезном сообщении.
Я не знаю, что с этим делать все это, и мы будем признательны за любую информацию, которую кто-либо может предложить.
=====
ОБНОВЛЕНИЕ (19:36 MST, вторник, 15 октября 2024 г.) :
=====
Поскольку многие люди, кажется, не понимают мой вопрос, я напишу его еще раз: я хочу загрузить файл без перезагрузки страницы (что, я думаю, возможно, но может и не быть).
Как я писал в своем первоначальном сообщении:< /p>
Если я нажму кнопку «Загрузить файл (асинхронно)», форма отправится и файл будет загружен.
Однако, если я добавлю type="button" к тегу , форма не будет отправлена ​​(как ожидалось), но файл не будет загружен. >
Я не понимаю, как мне не удалось сообщить об успешной загрузке файла, если страница перезагружается из-за того, что форма была отправлена, но каким-то образом я это сделал.< /p>
Но чтобы удовлетворить человека, разместившего комментарии ниже, вот var_dump $_FILES, когда страница *перезагружается из-за отправки формы :

Код: Выделить всё

array(1) { ["fileToUpload"]=> array(6) { ["name"]=> string(13) "IMG_1818.webp" ["full_path"]=> string(13) "IMG_1818.webp" ["type"]=> string(10) "image/webp" ["tmp_name"]=> string(26) "/private/var/tmp/phpB7PHbx" ["error"]=> int(0) ["size"]=> int(354262) } }

Возможно, я использую неправильный язык при написании «Я хочу асинхронно загрузить файл...» — возможно, мне следует написать: «Я хочу загрузить файл в фоновом режиме». ..."?
В любом случае я не хочу, чтобы страница перезагружалась при нажатии кнопки «Загрузить файл (асинхронно)» — Я хочу иметь возможность нажимать кнопку без перезагрузки страницы.
=====
end UPDATE (19:36 MST, вторник, 15 октября 2024 г.)
Я хочу асинхронно загрузить файл, используя наш JavaScript/AJAX (без jQuery) и PHP, без необходимости отправлять форму, что, как мне казалось, возможно с помощью JS/AJAX.
Мой код:

Код: Выделить всё

async function uploadFile()
{
let formData = new FormData();
formData.append("file", fileToUpload.files[0]);
await fetch('../php/upload.php',
{
method: "POST",
body: formData
}); // await fetch(
alert('The file has been uploaded successfully.');
}; // async function uploadFile()







Select file to upload:

Upload File (async)

Если я нажму кнопку «Загрузить файл (асинхронно)», форма отправится и файл будет загружен.
Однако, если я добавлю type="button" в тег , форма не отправляется (как ожидалось), но файл не загружается.Я подумал, что проблема может заключаться в том, что php и html находятся в одном файле, поэтому я разделил их безрезультатно — загрузка работает без type=" button", но не работает с ним.
Я видел сообщения об использовании скрытых , но не пробовал их реализовать, поскольку не думаю, что это необходимо.
Я неправильно понимаю, что могут делать JS/AJAX и PHP, или это проблема с моим кодом?
Большое спасибо!

Подробнее здесь: https://stackoverflow.com/questions/790 ... ax-and-php