Загрузка фотографий на сервер с помощью Ajax

S3
На сайте с 29.03.2012
Offline
349
1486

Сайт на Wordpress.

Есть самописная страница, где зарегистрированные пользователи могут оставлять свои отзывы. Вроде все работает как мне надо. Но возникла необходимость добавлять фотографии к отзывам. И вот тут уперся напрочь! Нужно не просто добавлять картинки, но и сделать возможность вставлять их наиболее простым способом в текст. Поэтому единственный способ загрузки, чтоб не перегружалась страница и сохранялся текст отзыва - добавление их через AJAX.

Перерыл кучу скриптов и плагинов и не один не работает как надо. Помогите найти самый простой вариант скрипта.

Нужно что бы файлы/картинки легко добавлялись. На странице отзыва появлялась или картинка предпросмотра или ссылка на картинку, а уж вставить ее в текст я смогу.

Максимально удобно было бы так - http://xozblog.ru/2012/10/html5-uploader/

Но здесь я не могу пока разобраться со всеми параметрами и с тем как само сохранение работает. Там используется странный (для меня ) код загрузки файлов на сервер.

// Создаем изображение на сервере

if(file_put_contents($uploaddir.$randomName, $decodedData)) {
// Записываем данные изображения в БД
//mysql_query ("INSERT INTO images (date,catalog,filename) VALUES (NOW(),'$uploaddir','$randomName')");
echo $randomName.":загружен успешно";

}
else {
// Показать сообщение об ошибке, если что-то пойдет не так.
echo "Что-то пошло не так. Убедитесь, что файл не поврежден!";
}

Можно ли так сохранять? Я привык к move...

Еще нашел неплохую заготовку - http://htmlweb.ru/java/example/image_preview3.php

Но опять же перейти к AJAX не могу - оказывается пока не нажмешь submit - не появляются переменные $_FILE. Соответственно если нажимаешь- начинает заново грузиться страница....

Думал поставить визуальный редактор типа TinyMCE, но он как то не очень хочет дружить с Wordpress если ставить его дополнительно на форму, привязывая textarea. Да и плагин загрузки фото к нему дорогой уж очень.

В-общем, может кто направит на путь истинный? Готовое решение - идеально, но даже сами идеи, как это правильно организовать очень приветствуются и благодарятся)))

M
На сайте с 04.12.2013
Offline
223
#1

Сделать отправку файла, используя AJAX, можно. Посмотрите, что делает браузер, когда отправляет файл обычным способом.

Домены и скрипт для коротких ссылок: https://u75.ru/domains-for-shortcuts
S3
На сайте с 29.03.2012
Offline
349
#3

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

Нужно теперь, что бы в textarea при нажатии на картинку вставлялась ссылка на нее.

сам код картинки формируется просто -

$('#respons').append('<img src="http://www.trutravel.ru/wp-content/uploads/'+ file +'" title="Нажмите, что бы вставить в запись" width="150px"  alt="Нажмите, что бы вставить в запись" width="150px">').addClass('success');

Есть у меня работающая функция, которая передает в textarea нужный тег, достаточно передать в нее параметры примерно так:

onclick="Butteg('c_post','<b>','</b>');"

Три параметра - в какой ид вставлять код, что будет перед выделенным фрагментом, что после.

для простых тэгов хорошо работает.

но вот как ее добавить к коду картинки правильно - не понимаю. Она должан выглядеть примерно так:

Butteg('c_post',' <img src="http://www.trutravel.ru/wp-content/uploads/"'>',' ');

Где то путаю с кавычками и дает ошибку синтаксиса. Как правильно заэкранировать, что получалась верная строка или может еще есть способ добавить код картинки в тело записи?

ДП
На сайте с 23.11.2009
Offline
203
#4

судя по вашему коду - как-то так


Butteg('c_post',' <img src=\"http://www.trutravel.ru/wp-content/uploads/\"'>',' ');

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий