#javascript #php #forms #api #asynchronous
#javascript #php #формы #API #асинхронный
Вопрос:
В настоящее время пытаюсь использовать класс загрузки изображений, который я создал на php, который сохраняет изображение в папку и текстовый файл, но я хочу сохранить его из api, который я вызываю на Javascript, а не путем отправки формы.
Здесь я пытаюсь вызвать api
async function createTweet(e) {
const id = document.getElementById('user-id').getAttribute('data-user-id');
const tweet = e.target.parentNode.parentNode.querySelectorAll('input')[1]
.value;
const image = e.target.parentNode.parentNode.querySelectorAll('input')[0];
console.log(image);
const data = new FormData();
data.append('userId', id);
data.append('tweet', tweet);
data.append('tweet-image', image);
try {
const conn = await fetch('php/api/api-create-tweet.php', {
method: 'POST',
body: data,
});
const res = await conn.text();
getData();
// TODO show user he has created a tweet
} catch (error) {
console.log(error);
}
}
Просто интересно, что я могу сделать с изображением, чтобы я мог прочитать файл в моем api с помощью $ _FILES[‘tweet-image’] и нужно ли мне что-либо сделать с данными формы, чтобы придать им тип формы enctype
Комментарии:
1. Пожалуйста, проверьте мой ответ (часть B) об изменении этой строки:
const image = e.target.parentNode.parentNode.querySelectorAll('input')[0].files[0];
(обратите внимание на . files [0]) — это сработало?
Ответ №1:
Код должен работать с некоторыми изменениями. У вас есть два способа сделать это (см. FormData @ developer.mozilla.org ):
Допустим, у вас есть простая форма:
<!-- just an example -->
<form method="post" action="form.php" enctype="multipart/form-data">
<input type="text" name="tweet" />
<input type="file" name="image" />
<input type="submit" />
</form>
<script>
/* prevent sending the form */
var form = document.forms[0];
form.onsubmit = function(e) {
e.preventDefault();
sendForm();
}
</script>
A. импорт <form>
непосредственно в FormData()
:
<script>
async function sendForm() {
// import form input here ->
const data = new FormData(form);
const conn = await fetch('form.php', {
method: 'POST',
body: data
});
const res = await conn.text();
}
</script>
B. убедитесь, что вы действительно добавляете .files[0]
из input[type="file"]
в formData()
:
<script>
async function sendForm() {
const data = new FormData();
const tweet = form["tweet"].value;
// notice the use of .files[0] -->
const image = form["image"].files[0];
data.append("tweet", tweet);
data.append("image", image);
const conn = await fetch('form.php', {
method: 'POST',
body: data
});
const res = await conn.text();
}
</script>
Тогда в вашем PHP-файле вы должны иметь доступ как $_POST["tweet"]
к (тексту), так и $_FILES["image"]
к (файлу) в этом примере.