#php #javascript #jquery #html #ajax
#php #javascript #jquery #HTML #ajax
Вопрос:
Я пытаюсь создать «демонстрационный» веб-сайт для клиента, который хочет показать шаблон своим клиентам. Одна из функций, которую они действительно ищут, — это позволить пользователю загружать свой логотип (jpg, png) и заменять изображение логотипа-заполнителя в режиме реального времени. Это также должно быть только временным, пока сайт не будет обновлен.
Пример сайта будет только домашней страницей, а его полноценный сайт на PHP / HTML без базы данных.
Возможно ли это? Я провел большую часть утра, просматривая Google, и ничего не нашел.
Любая помощь приветствуется. Спасибо.
Ответ №1:
Если это только одна страница, вы можете сохранить выходные данные страницы как HTML со всеми статически связанными javascript / css / изображениями.
Затем вы можете определить область внутри HTML, которую можно заменить (например, комментариями HTML <!-- edit:start -->...<!-- edit:end --> или комментариями CSS /* edit:start */.../* edit:end */ ), которые можно динамически изменять, например, с помощью временного изображения (-URL).
Но ваш вопрос довольно широкий, и может быть множество способов, как это сделать, так что это всего лишь одна идея или, возможно, только один ее аспект.
Ответ №2:
Вы могли бы разрешить пользователю загружать изображение, а затем после загрузки изображения загружать его в $_SESSION переменную. При выводе изображения логотипа проверьте наличие $_SESSION переменной, созданной вами при загрузке, и, если она существует, измените источник логотипа на выходной скрипт, который считывает $_SESSION переменную и выводит ее содержимое с соответствующими заголовками.
<?php
session_start();
if (isset($_FILES['logo_upload'])) {
$handle = fopen($_FILES['logo_upload']['tmp_name'], "r");
$cntnts = fread($handle, filesize($_FILES['logo_upload']['tmp_name']));
fclose($handle);
$_SESSION['logo_data'] = $cntnts;
}
?>
Комментарии:
1. Я понимаю концепцию здесь, но мне интересно, когда это произойдет. Я имею в виду, что страница уже была бы загружена / отображена до того, как пользователь загрузит изображение. Я полагаю, я мог бы попытаться сделать что-то вроде «onUpload», чтобы поменять изображение после завершения загрузки пользователем. Или это то, что вы уже говорите?
2. Это кажется хорошим подходом. После использования вызова загрузки ajax вы можете проверить данные обратного вызова, и если он прошел успешно, вы можете изменить источник логотипа на PHP-скрипт, который выводит загруженный логотип пользователя. Это также может быть достигнуто без ajax, установив для цели формы загрузки скрытый iframe и загрузив PHP-скрипт внутри iframe, который выводит некоторый JavaScript, который изменяет источник изображения логотипа при успешной загрузке.
Ответ №3:
Хорошо, итак, я понял, по крайней мере, основную концепцию того, что я ищу.
Поэтому я использовал ajaxupload.js из значений для загрузчика, затем включил jQuery My Image Scale из Hermits для автоматического масштабирования изображения до содержащего div.
В настоящее время изображение загружается в li, который создает скрипт, а затем перемещается с помощью .replaceWith для замены исходного логотипа. Это работает отлично.
Теперь я собираюсь настроить код, чтобы не требовать создания элемента li перед перемещением.
Для тех, кто еще хочет это сделать, вот ссылка на Pastebin
Спасибо всем за вашу помощь и предложения.