Форумы xBB | ||||||||||||||||||
|
Форумы xBB > BBCode и прочие языки упрощенной разметки Upload картинок, как в FCKeditor'еАвтор: dima. Последнее редактирование: 2009-04-24 16:34:39 Получил письмо:Добрый день, Дмитрий! Поскольку тема может быть интересна всем, то ответ решил дать публично. Откройте файл bbcode/xbb.php. Найдите в нем код: Text <td><a href="#"onclick="xbb_insertLink('img', '<?php echo $xbb_lang['img_prompt']; ?>');return false;" class="toolbarButton"><img alt="[img]" src="./images/buttons/image.gif" id="img_img" /></a></td> Этот - весь код, относящийся к вставке картинок. Больше ничего нет В этом коде рисуется кнопка для вставки картинки и на клик по ней назначается JS-функция вставки ссылок. Нам теперь нужно написать свою JS-функцию (или несколько), которые будут
Кроме этого фронтенда нам следует написать бакенд (на PHP), который будет получать картинку от пользователя, сохранять её и возвращать на клиент адрес сохранённой картинки. Библиотек для работы с Ajax'ом довольно много, и у каждого разработчика есть своя любимая. Дальше для определенности я буду использовать библиотеку JsHttpRequest Дмитрия Котерова. Выбор определился простотой и лаконичностью кода с использованием этой либы. Если вы используете другие библиотеки, то соответствующие куски кода должны переписать самостоятельно. BackendЭто - минимальный рабочий код Backend'а:PHP <?php// Подключаем JsHttpRequest. У вас путь к библиотеке будет, наверное, другим: include_once './JsHttpRequest.php'; // Если надо, пофиксите кодировку: $JsHttpRequest = new JsHttpRequest('utf-8'); // Сохраняем картинку. Пофиксите путь и все остальное: $path = 'img/' . rand() . '.jpg'; move_uploaded_file($_FILES['img']['tmp_name'], $path); $path = '/bbcode/test/' . $path; // Отдаем фронтенду путь к картинке: $_RESULT = array('path' => $path); Этот код имеет следующие недостатки:
FrontendВ файле bbcode/xbb.php меняем указанный в начале код на следующий:HTML <script type="text/javascript">// Выводит форму для выбора картинки: function img() { xbb_buttonClick(); var div = document.getElementById('hidden_div'); if ('none' != div.style.display) { div.style.display = 'none'; return false; } if (window.innerWidth) { var width = window.innerWidth; } else { var width = parseInt(xbb_editor.currentStyle.width); } div.style.top = (parseInt(xbb_height/2) - 100) + 'px'; div.style.left = (parseInt(width/2) - 160) + 'px'; div.innerHTML = '<div style="width:320px;height:180px;padding:10px">' + '<form onsubmit="imgSubmit();return false" name="imgOptions" ' + 'method="post" enctype="multipart/form-data">' + '<p>Введите адрес картинки:</p>' + '<input name="address" style="width:300px" />' + '<p>или залейте новую:</p>' + '<input type="file" name="img" style="width:300px" />' + '<br /><br />' + '<input type="submit" value="Готово" />'; + '</form>' + '</div>'; div.style.display = ''; return false; } // Обрабатывает сабмит формы для выбора картинки: function imgSubmit() { var addr = document.imgOptions.address.value; if (addr) { imgInsert(addr); return; } xbb_startLoader(); document.getElementById('loader').style.zIndex = "10"; // (не забудьте подгрузить JsHttpRequest.js) var req = new JsHttpRequest(); req.onreadystatechange = function() { if (req.readyState == 4) { imgInsert(req.responseJS.path); } } req.open(null, '/bbcode/test/backend.php', true); req.send({img: document.imgOptions.img}); } // Формирует BBCode и вставляет его в текст. function imgInsert(addr) { document.getElementById('hidden_div').style.display = 'none'; xbb_insertTags('[img]' + addr + '[/img]', ''); xbb_stopLoader(); } </script> <td><a href="#" onclick="img();return false;" class="toolbarButton"><img alt="[img]" src="./images/buttons/image.gif" id="img_img" /></a></td> В случае необходимости следует пофиксить путь к бакенду, внешний вид формы, добавить поля и т.п. Пробуйте. Должно работать. 21 комментарий
Что-то мне вот этот участок бэкенда не понравился |
| 24.04.2009 17:50:07 | # |
| 24.04.2009 22:32:26 | # |
| 16.07.2009 15:26:03 | # |
| 17.07.2009 12:02:33 | # |
| 17.07.2009 12:41:30 | # |

| 17.07.2009 14:39:46 | # |
| 17.07.2009 19:30:48 | # |
| 17.07.2009 23:36:23 | # |
© 2007-2012, Дмитрий Скоробогатов.
Разрешается воспроизводить, распространять и/или изменять материалы сайта
в соответствии с условиями GNU Free Documentation License,
версии 1.2 или любой более поздней версии, опубликованной FSF,
если только иное не указано в самих материалах.