URL-адрес публикации HTML-формы

Хорошо, у меня есть HTML-форма, которая использует JavaScript для отображения загруженного здесь изображения — это мой HTML-код.

<form action = "/inc/sendtochan.php" method = "post">
              <label for = "fname">Title:</label><br>
              <input type = "text" id = "fname" name = "title" value = "" size = "64"><br>
              <label for = "discription">Enter content description:</label><br>
              <textarea name = "discription" rows = "10" cols = "60"></textarea><br>
              <label for = "link">Link to content:</label><br>
              <input type = "text" id = "lcontent" name = "lcontent" value = "" size = "64"><br>
              <label for = "link">Select Image:</label><br>
              <div class = "profile-picture">
              <h1 class = "upload-icon">
                <i class = "fa fa-plus fa-2x" aria-hidden = "true"></i>
              </h1>
              <input
                class = "file-uploader"
                type = "file"
                onchange = "upload()"
                accept = "image/*"
                name  = "imageurl"
              />
              </div><br><br>
              <input type = "submit" name = "submitcontent" value = "Send Content to Channel">
            </form>

Используемый JavaScript-скрипт отображает окно, которое затем меняется на предварительный просмотр выбранного изображения.

function upload() {
  const fileUploadInput = document.querySelector('.file-uploader');

  if (!fileUploadInput.value) {
    return;
  }

  const image = fileUploadInput.files[0];

  if (!image.type.includes('image')) {
    return alert('Sorry Only images are allowed!');
  }

  if (image.size > 10_000_000) {
    return alert('Maximum upload size is 10MB!');
  }
  
  const fileReader = new FileReader();
  fileReader.readAsDataURL(image);

  fileReader.onload = (fileReaderEvent) => {
    const profilePicture = document.querySelector('.profile-picture');
    profilePicture.style.backgroundImage = `url(${fileReaderEvent.target.result})`;
    
  }
}

Все работает идеально, и изображение отображается, теперь в php из запроса на публикацию я пытаюсь получить URL-адрес изображения, которое будет опубликовано, в моем /inc/sendtochan.php я читаю данные из запроса на публикацию. с

$imageurl = trim($_POST['imageurl']);

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

Спасибо

Я могу сразу же отобразить URL-адрес изображения, когда он выбран, добавив его в javascript.

return alert(`url(${fileReaderEvent.target.result})`);

Так что мне просто нужно, чтобы этот URL-адрес был отправлен вместе с запросом на публикацию, теперь имя изображения

Вы имеете в виду URL-адрес действия FORM? Или полученный URL-адрес изображения после того, как вы переместили его в какую-то папку на своем сервере? Вы можете прочитать фактический URL-адрес сервера из массива $_SERVER. Помимо этого, URL-адрес может быть любым, включая URL-адрес сценария, который доставляет изображение.

Honk der Hase 09.06.2024 12:04

Я думаю, может быть, мне нужно изменить свой JavaScript, чтобы сохранить изображение в папке сервера? Я предполагаю, что в данный момент мой Java-код просто сохраняет температуру изображения, чтобы отобразить его на моей странице, но да, я хочу, чтобы этот временный URL-адрес, где сохраняется изображение, был отправлен с моим действием публикации, в тот момент, когда он публикует имя img, но мне нужен URL изображения

Nemzzy Builds 09.06.2024 12:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
77
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку вы уже используете <form>, вы можете легко добавить скрытое поле в запрос POST:

<form ...>
  <input type = "hidden" name = "imageurlonly" value = "">
</form>

и напишите в него с помощью функции JavaScript

function upload() {
  // ...
  fileReader.onload = (fileReaderEvent) => {
    const profilePicture = document.querySelector('.profile-picture');
    profilePicture.style.backgroundImage = `url(${fileReaderEvent.target.result})`;
    document.querySelector('[name = "imageurlonly"]').value = fileReaderEvent.target.result;
  }
}

то вы можете получить к нему доступ в PHP с помощью

$imageurl = $_POST['imageurlonly'];

ЛЕГЕНДА!!! Это сделало именно то, что мне было нужно, большое спасибо!

Nemzzy Builds 09.06.2024 12:13

Содержимое файла, загружаемого в POST-запросе, находится не в массиве $_POST, а в массиве $_FILES. На сайте w3schools.com есть хорошее руководство по этому вопросу: Загрузка файла PHP.

Функция upload(), которую вы создали, вполне хороша. Затем, когда вы нажимаете кнопку «Отправить», форма должна просто выполнить обычный запрос POST (тип MIME multipart/form-data), без необходимости делать что-либо еще. И затем вы сможете найти файл в массиве $_FILES с помощью PHP.

Другие вопросы по теме