$( document.createElement("img") )
.attr({
style: 'margin:3px;width:50px;',
src: "/upload/files/" + file
})
.click( function(e) {
$("textarea[name='full_news']").val(
$("textarea[name='full_news']").val() + "тут путь до картинки"
);
})
.appendTo("#files")
;
Помогите с JS plizzzz
Тут вот какое дело у меня вышло. делал я для сайта такую штуковину
Добавление новости... суть:
Есть страница ХТМЛ в которой загружается форма добавления, [HTML]<textarea name="full_news"></textarea>[/HTML] Ниже она целиком
[HTML]
<form name="upload" method="post" action="/admin/add_news.php">
<table >
<tr><td>Название:</td><td>
<input type="text" name="name" size="100%""></td>
</tr>
<tr><td>Альтернативное название:</td><td>
<input type="text" size="100%" name="alt_name"></td>
</tr>
<tr><td>Новость в категории:</td><td>
<select name="cat">
<?php
category_show();
?>
</select> </td>
</tr>
<tr>
<td colspan="2">
<TEXTAREA cols="100%" rows="10" name="short_news" value=""></textarea></td>
</tr>
<tr>
<td colspan="2">
<TEXTAREA cols="100%" rows="10" name="full_news"></textarea></td>
</tr>
<tr><td>
Автор: <input type="text" name="avtor" ></td><td>
Ссылка:<input type="text" name="link" ></td>
</tr>
<tr>
<td colspan="2">Подкрепить изображения</td>
</tr>
<tr>
<td colspan="2">
<div id="uploadButton" class="button">
<font style="border:1px dashed blue; color:blue; font-size:20px; border-top:0px; border-left:0px; border-right:0px;">
Загрузить изображение (Жмите на серый прямоугольник)
</font><br><br>
<img id="load" src="/upload/loadstop.gif"/>
</div>
<div id="files">
Загруженные файлы :<br>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<td colspan="2"> <input type="submit" value='send file'> </td>
</tr>
</table>
</form>[/HTML]
Для вот этого участка
[HTML]Загрузить изображение (Жмите на серый прямоугольник)
</font><br><br>
<img id="load" src="/upload/loadstop.gif"/>
</div>
<div id="files">
Загруженные файлы :<br>
</div>[/HTML]
есть JS код(его я брал с сайта
[HTML]
$(document).ready(function() {
var button = $('#uploadButton'), interval;
$.ajax_upload(button, {
action : '/upload/upload.php',
name : 'myfile',
onSubmit : function(file, ext) {
// показываем картинку загрузки файла
$("img#load").attr("src", "/upload/load.gif");
$("#uploadButton font").text('Загрузка');
/*
* Выключаем кнопку на время загрузки файла
*/
this.disable();
},
onComplete : function(file, response) {
// убираем картинку загрузки файла
$("img#load").attr("src", "/upload/loadstop.gif");
$("#uploadButton font").text('');
// снова включаем кнопку
this.enable();
// показываем что файл загружен
$(" <img style='margin:3px;' width='50' src='/upload/files/" + file + "'> ").appendTo("#files");
}
});
});
[/HTML]
Вопрос к Вам, знатоки:
Как имея такой код можно доработать его, чтобы после загрузки файла на сервер он отображал не только миниатюры изображений, но и сделать миниатюру ссылкой, которая при нажатии добавляла бы в textarea полный путь к изображению
Или вы хотите в textarea засунуть?? Тогда надо $("textarea[name='full_news']").val('Тут html');
Более подробно разбираться неохото по причине того, что оформлено не красиво. Сделайте в html-коде отсутпы норм (да и в JS тоже), потому что самому смотреть и разбираться неохото, если уж просите помощи, так делайте это "с уважением" =)
Но все равно, вот этот момент не понял
[HTML]Тогда надо $("textarea[name='full_news']").val('Тут html');[/HTML]
<form name="upload" method="post" action="/admin/add_news.php">
<table >
<tr><td>Название:</td><td>
<input type="text" name="name" size="100%"></td>
</tr>
<tr><td>Альтернативное название:</td><td>
<input type="text" size="100%" name="alt_name"></td>
</tr>
<tr><td>Новость в категории:</td><td>
<select name="cat">
<?php
category_show();
?>
</select> </td>
</tr>
<tr>
<td colspan="2">
<TEXTAREA cols="100%" rows="10" name="short_news" value=""></textarea></td>
</tr>
<tr>
<td colspan="2">
<TEXTAREA cols="100%" rows="10" name="full_news"></textarea></td>
</tr>
<tr><td>
Автор: <input type="text" name="avtor" ></td><td>
Ссылка:<input type="text" name="link" ></td>
</tr>
<tr>
<td colspan="2">Подкрепить изображения</td>
</tr>
<tr>
<td colspan="2">
<div id="uploadButton" class="button">
<font style="border:1px dashed blue; color:blue; font-size:20px; border-top:0px; border-left:0px; border-right:0px;">
Загрузить изображение (Жмите на серый прямоугольник)
</font><br><br>
<img id="load" src="/upload/loadstop.gif"/>
</div>
<div id="files">
Загруженные файлы :<br>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<td colspan="2"> <input type="submit" value='send file'> </td>
</tr>
</table>
</form>[/HTML]
Извините что без конкретных советов, просто убрал лишнюю кавычку в параметрах одного из полей. Читабельность получилась выше.
Если мне не изменяет память, то "вырванный" вами кусок кода использует jQuery.
Вы пробовали обратиться к документации по jQuery? (извините, не владею знаниями по данной библиотеке)
Вот нашёл для вас статью... Глянув в тот код, не смог не заметить, что ваш код похож на модифицированный Ajax File Upload ...
Покопавшись еще, нашёл вот:
http://www.codenet.ru/webmast/js/ajax-uploader/
И пишем:
Код:
Вот, код не проверял - далее там додумать сами можете. Возможна ошибка - click может не сработать, если элемент ещё не добавлен к какому-то блоку (т.е. #files) - но тут хз, надо проверять + FireBug в помощь
просто я с JS и JQuery знаком очень слабо...
Вы вон на весах под моим аватаром нажмите - и там спасибо лучше поставьте=)