динамическая загрузка изображений на сервер

В 13 лет святым граалем должны быть сиськи подружки, а не jQuery

 

harek13
Повесь onchange событие на элемент

 

Тема сисек так и не раскрыта. Не оффтопте

 

Apple, Апельсин, лучше дайте хорошую ссылку, как с помощью XMLHttpRequest - объекта грузить файлы на сервер. Я бы тоже почитал...
Кстати вот такое по теме:
[js]var xmlHttp = false;
if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
elseif(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if(xmlHttp) {
// do anything
}[/js]
будет работать во всех более-менее современных браузерах со включенным JavaScript или есть браузеры, где этот объект создаётся ещё как-то по-другому?

 

sobachnik
на обычном js даже нет желания чтото большое писать. раньше на jsHttpRequest делал, сейчас на jQuery и не парюсь.

 

Апельсин А у меня почему-то радикально противоположное желание Никаких фреймворков, ничего готового, только чисто на js...

 

sobachnik
когдато я тоже такого придерживался. потом понял, что за 10 мин и десяток-второй строчек с джиквери можно сделать такую штуку, на которую бы ушло час возни и кучи говнокода со всякими фиксами багов.

 

Апельсин, с одной стороны я с тобой согласен. Конечно, так удобнее и проще, но у меня на даче старенький комп Pentium III 700 MHz, 256 MB RAM и когда к веб-страничке подключается какой-то фреймворк (а это по-любому несколько тысяч, и, скорее всего, несколько десятков тысяч строк JavaScript кода), то браузер начинает подтормаживать при загрузке страницы и отжирать много памяти... Я, конечно, понимаю, что сейчас ориентироваться на такие компы, в общем-то не особо актуально, но сам пока стараюсь не подключать к страничке ничего лишнего... Только тот js функционал, который реально нужен на данной странице. Наверно, это пройдёт с покупкой нового ноута для дачи ))

 

sobachnik
да, там куча кода, который ты при работе с сайтом можешь на 10% всего использовать и как бы остальные 90% зря грузятся. Но получаешь быстроту написания и хоть какуюто относительную стабильность при просмотре в ишаке и мозилле.
Когда jquery юзают только при надобности, а не для подсветки каждой кнопки и буквы - тогда тормозить не должно. Иначе, тому железу место в музее.
В джиквери постарались чтобы отделить хтмл от js (сохраняя простоту доступа к элементам DOM), то есть при грамотном написании в страничке может вовсе не быть ни одной строки кода на js. Почитай книгу "jQuery в действии", поменяешь мнение скорей всего.

 

Апельсин, Спасибо. Возможно поменяю и стану им пользоваться, но мой любопытствующий характер, скорее всего, заставит меня сперва долго-долго сидеть и вникать во внутренности jQuery На данной стадии моего развития мне ещё интересно вникать в то, что происходит при обращении к каким-то функциям сторонних классов и наборов функций Но предвижу, что это долго и нудно, с бесконечным перепрыгиванием от одной функции к другой, от одного метода или класса к другому, с нудным поиском по файлам где и что и как написано, так как скорее всего вызываемые в конечном скрипте функции jQuery будут ссылаться на другие функции, методы, свойства, а те в свою очередь использовать ещё другие и т.д... и пока всё найдёшь и поймёшь как всё это реально работает - мозг вскипит. Я пробовал так "докопаться до истины", когда правил сайтик, использующий фреймворк "Yahoo" (или "yui"). Офигел несколько раз подряд пытаясь найти что же происходит при обращении всего-то к одной единственной функции из множества там имеющихся.

 

По-моему браузер тупит не из-за загрузки файлов (т.е. не из-за времени, которое передаются эти js-файлы по сети), а из-за времени, расходуемого на разбор/анализ/компиляцию js-кода... Я не знаю, в js можно сделать так, чтобы подключенные js скрипты не разбирались и компилировались браузером заново при каждом клике по ссылке на другую страничку с теми же подключенными скриптами, а сохранялись в кэш в уже скомпилированном виде...
Хотя, возможно, я только что вообще бред написал, не понимая того, как браузер с js работает

 

Да никак.
Делай через фреймы: при выборе сабмит фрейма, потом со стороны РНР получает JS код и его выполняем через eval.

 

Ну да, понятно. Но ведь всё равно, чтобы компьютер (процессор) выполнил какие-то команды, описанные на javaScript - этот исходный js код должен быть каким-то образом преобразован браузером в набор команд для процессора, в машинный код. Или не так? Я, честно, не знаю, так ли это, я написал свои мысли просто. Но если так, то получается, что при каждой перезагрузке страницы, к которой подключен фреймворк типа Yahoo или jQuery (а это 20...30+ тысяч строк js кода) браузер сперва должен провести синтаксический анализ всей этой текстовой писанины, проверить на ошибки, чтобы там точки с запятой стояли на своих местах и пр., потом сделать из этого текста некий набор битов, "понятный процессору". И вот этот процесс анализа/интерпретации кода может занимать некое время на старых машинах, если кода очень много, вот о чём я.
Я не уверен, что это на самом деле так, но просто на практике замечаю, что когда к страничке подключено очень много javaScript, то браузер некое время при загрузке странички тупит (и в это время, обычно 2-3 секунды, программка Auslogics BoostSpeed показывает загрузку CPU = 100%). Потом всё становится нормально, только оперативной памяти лишних 20...30 Мб (а то и более) браузер съедает.
Я не собираюсь отговаривать людей от фреймворков, от jQuery, да это и глупо было бы, наверно. Просто вот лично мне (на данный момент) как-то хочется, чтобы к web-странице было подключено ровно столько javaScript, сколько реально используется на данной конкретной странице. Но это, наверно, не основное, почему я не хочу использовать готовое. Основное - мне пока ещё интересно самому писать (в том числе и на js) весь функционал сайта. Полностью. В крайнем случае можно покопаться в том же jQuery и скопипастить оттуда несколько нужных мне на этой странице функций, но не подключать его полностью.
И даже если я буду подключать его полностью, в том виде, каким его предлагают его разработчики - то сперва я, естественно, захочу не только узнать, какие в нём есть методы и как ими пользоваться, но и увидеть и понять, как эти методы и функции устроены изнутри...
Но это я уже совсем не в ту степь уехал, кажется
Кстати, ведь php - тоже интерпретируемый язык? Однако можно сделать так, чтобы сервер хранил не только сами текстовые php-скрипты, но и готовый машинный код, вытекающий из этих скриптов... И при обращении к той же, скажем index.php не запускался заново процесс анализа текста скрипта, а грузился уже заранее преобразованный в машинный код набор инструкций для сервера. Я недавно только где-то здесь на этом форуме об этом читал, правда не помню где именно...

Вот это жаль, конечно, если так... я надеялся, что есть способ, так как вот как раз сейчас передо мной встала задача сделать загрузку фотографий на сайт без перезагрузки странички. Думал, что ajax (и, конкретно, объекта XMLHttpRequest) будет достаточно...

 

harek13

Идея такова.

<form action="/image_upload.php" method="POST" target="image_frame">
<input type="file" name="image">
</form>

<iframe name="image_frame" style="display:none;"></iframe>

В image_upload.php обрабатываешь изображение, создаёшь миниатюру, обратно возвращаешь javascript код с сылкой на миниатюру, который вставляет в код страницы элемент <img>

Реализовывал примерно такое же, но при загрузке нескольких изображений нужно динамически менять форму, динамически создавать iframe для каждой отправки, ну и кода чуть больше.

 

[js]<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function file_upload() {
if (typeof file_upload.guid == 'undefined') {
file_upload.guid = 0;
}
file_upload.guid++;
$('<iframe name="file_upload_target_' + file_upload.guid + '" src="javascript:void(0);" style="display:none;"></iframe>')
.attr('id', 'file_upload_target_' + file_upload.guid)
.attr('name', 'file_upload_target_' + file_upload.guid)
.appendTo('body');
$('#file_upload_form').empty();
$('#file_upload_input').removeAttr('id').attr('name', 'upload_file').appendTo('#file_upload_form');
$('#file_input').prepend('<input type="file" id="file_upload_input" onchange="file_upload();">');
$('#file_input').append('<div id="file_loading_icon_' + file_upload.guid + '" style="margin-top:10px; clear:both;">
<img src="/s/static/img/loading.gif" /> loading...</div>');
$('#file_upload_form').attr('action', '/upload.php?guid=' + file_upload.guid)
.attr('target', 'file_upload_target_' + file_upload.guid).submit();
}

function onfileupload(data) {
var content = '<div style="float: left; padding: 10px; text-align: center; width: 100px;">';
content += '<input type="hidden" name="ad_image" value="' + data.filename + '^' + data.title + '">';
content += '<img src="/images/uploaded/' + data.filename + '.thumbnail" /><br />';
content += data.title;
content += ' (<a href="javascript:void(0);" onclick="$(this).parent(\'div\').remove();">remove</a>)';
content += '</div>';
$('#uploaded_images').append(content);
$('#file_loading_icon_' + data.guid).remove();
$('#file_upload_target_' + data.guid).remove();
}
</script>[/js]

HTML:

1. <div id="file_input">
2.   <input type="file" id="file_upload_input" onchange="file_upload();">
3.   <div id="uploaded_images"></div>
4. </div>

возвращается скриптом upload.php
[js]<script type="text/javascript">window.top.onfileupload({"filename":"af6a8dd1202d722ec0f91ae7a93ea16c.tmp", "title":"DSCN8369.JPG", "guid":"1"});</script>[/js]

upload.php проверяет, что файл является изображением, кладёт в папку /images/uploaded/ с уникальным номером, делает там же превьюшку с тем же именем, но с расширением thumbnail