Хочу написать мод удобного добавления и просмотра катинок в сообщении

[deadbead]

Не так давно наткнулся на реализацию просмотра картинок в двиге DLE и уж очень приглянулся мне этот функционал...

При клике на картинку подгружается (AJAX) большое изображение если оно больше области просмотра, то растягивается до границ области просмотра и появляется значок при клике на который растягивается до оригинального размера. Изображение можно перетаскивать. При повторном клике большое изображение "возвращается на место". Как это работает можно посмотреть например тут

Вот и решил что было бы неплохо реализовать это для любимого двига форума.

Идея создать кроссбраузерный AJAX модуль чтобы при перетаскивании картинки на форму ответа она заливалась на сервис хостинга изображений iPicture и формировался bbCode

[img=http://ipicture.ru/url_to/big_picture.jpg]http://ipicture.ru/url_to/small_picture.jpg[/img]

Ну и соответственно чтобы на сообщении эта картинка вела себя так же как и в движке DLE

Реализовать думаю надо в 3 этапа:

1. Через диалог выбора файла реализовать AJAX функционал добавления картинки на iPicture (в админке должна быть страница настройки схожая с главной страницей сервиса iPicture , где можно было бы указать какого размера должны быть превьюшки, качество изображения и т.д.) с получением ссылок на превью и оригинал и формированием bbCode
2. Реализовать функционал перетаскивания и масштабирования взяв за основу функционал DLE. (как в примере)
3. Реализовать Drug'&'Drop вместо диалога выбора файла.

Однако боюсь, что один все не потяну... Поэтому ищу напарника для реализации со знаниями AJAX технологии, т.к. сам я с ней знаком лишь поверхностно...

Жду ваших предложений и комментариев!

[deadbead]

Вот пример как я хотел бы реализовать функционал добавления изображения

http://toolbar.[censored]en/toolbar_demo_02.swf

Только в этом примере это реализовано по средством toolbar (плагин для браузера) а мне бы хотелось обойтись без него... Ну и соответственно не HTML а bbCode (и не на ImageShack, а на iPicture)

Хотя какой код формировать (HTML или bbCode) было бы неплохо заложить в настройку мода... (с расчетом на будущее учитывая версию SMF 2.0 c ее визивиг редактором)

[digger®]

Не так давно наткнулся на реализацию просмотра картинок в двиге DLE и уж очень приглянулся мне этот функционал...

При клике на картинку подгружается (AJAX) большое изображение если оно больше области просмотра, то растягивается до границ области просмотра и появляется значок при клике на который растягивается до оригинального размера. Изображение можно перетаскивать. При повторном клике большое изображение "возвращается на место".

Сделал мод Highslide Image Viewer

[deadbead]

Абалдеть! У меня и в мыслях небыло, что этот функционал может не иметь отношение к DLE, а быть отдельной разработкой! digger, спасибо вам большое! Мод бесспорно полезен, однако у меня идея применить этот функционал не к прикрепленным изображениям а к внешним. (Чтобы хранились они на сервере iPicture чтобы снизить нагрузку на сервер и экономить место)

Кто-нибуть знает как отловить событие "бросания" картинки на поле ввода и передать это имя файла в php скрипт через AJAX?

Форму отправки файла на сервер iPicture и админскую часть (настройку) я "беру на себя".

[deadbead]

Mavn, сделай, пожалуйста, меня модератором тем, которые я создаю... Я сам почищу весь мусор...

По теме:

Единственный вариант, который нашел для того чтобы понять что за объект перетащили на страницу это ifarame с параметром disingMode=on, но при этом возникают сложности с тем чтобы отловить событие onMouseUp... вроде как iframe его не поддерживает ( Пока реализовано что после перетаскивания еще нужно нажать кнопку "отправить", но хочу сделать что срабатывало по onMouseUp

Может кто-нибудь помочь?

[digger®]

Единственный вариант, который нашел для того чтобы понять что за объект перетащили на страницу это ifarame с параметром disingMode=on, но при этом возникают сложности с тем чтобы отловить событие onMouseUp... вроде как iframe его не поддерживает ( Пока реализовано что после перетаскивания еще нужно нажать кнопку "отправить", но хочу сделать что срабатывало по onMouseUp

Может кто-нибудь помочь?

А зачем вообще это перетаскивание нужно?

[digger®]

Незнаю) Хочется чтобы была фишка)) Я такого нигде не видел, любопытно возможно ли реализовать... Спортивный интерес)

Сложно. И работать будет, наверное, только в винде.

[deadbead]

Надо тестить)

То есть нет никакой возможность поймать onMouseUp у iframe ?

[digger®]

Надо тестить)
То есть нет никакой возможность поймать onMouseUp у iframe ?

Я думаю что начать нужно с

1. Через диалог выбора файла реализовать AJAX функционал добавления картинки на iPicture (в админке должна быть страница настройки схожая с главной страницей сервиса iPicture , где можно было бы указать какого размера должны быть превьюшки, качество изображения и т.д.) с получением ссылок на превью и оригинал и формированием bbCode

а шашечки типа

3. Реализовать Drug'&'Drop вместо диалога выбора файла.

прикручивать потом.

[digger®]

http://ajaxian.com/archives/drag-n-drop-in-javascript
не знаю может пригодится кому раз пошла речь и драг энд дропе! Особо не вникал в этом дело поскольку не очень интересен данный вопрос.

Нужен не просто drag'n'drop (это не проблема), а загрузка файлов методом drag'n'drop.

И похоже на java-script задача не решается.
Или java или flash.

[deadbead]

Ничего против flash не имею... Однако возникли более сложные трудности... а именно невозможность сформировать корректный POST запрос сервису iPicture, который бы он проглотил...

Вот как я пробую формировать и отправлять запрос: (жалко нет раскраски синтаксиса )

<?
$url = "http://ipicture.ru/Upload/index.php"; // это адрес, по которому скрипт передаст данные методом POST. Как видно, здесь указаны переменные, которые будут переданы через GET
$parse_url = parse_url($url); // при помощи этой функции разбиваем адрес на массив, который будет содержать хост, путь и список переменных.
$path = $parse_url["path"]; // путь до файла(/patch/file.php)
if($parse_url["query"]) // если есть список параметров

$path .= "?" . $parse_url["query"]; // добавляем к пути до файла список переменных(?var=23&var2=54)
$host = $parse_url["host"]; // тут получаем хост (test.ru)

$mdata = array(

"userfile" => urlencode("D:\Documents and Settings\Dima\Рабочий стол\smp.jpg"),

"method" => "file",

"userurl" => "",

"orig_resize" => "640",

"rotate" => "0",

"string_big" => "Увеличить",

"optimize" => "on",

"status" => "on",

"quality" => "85",

"thumb_resize_on" => "on",

"thumb_resize" => "180",

"string_small" => "Увеличить",

"galleries" => "12",

"comment" => ""
);


foreach($mdata as $key => $val) if($key != "" && $val != "") $data .= ($data == "" ? "" : "&").$key."=".$val;

//$data = "userfile=".urlencode("file:///D:\Documents and Settings\Dima\Рабочий стол\smp.jpg"); // а вот тут создаем список переменных с параметрами. Эти данные будут переданы через POST. Все значения переменных обязательно нужно кодировать urlencode ("еще тест")

//*
print $data;

print "<br><br><br>";

print_r($_REQUEST);

exit;//*/

$fp = fsockopen($host, 80, $errno, $errstr, 10);
if($fp){

$out = "POST ".$path." HTTP/1.1\n";

$out .= "Host: ".$host."\n";

$out .= "referer: ".$url."\n";

$out .= "user-agent: opera\n";

$out .= "content-type: application/x-www-form-urlencoded\n";

$out .= "content-length: ".strlen($data)."\n\n";

$out .= $data."\n\n";

fputs($fp, $out); // отправляем данные

// после отправки данных можно получить ответ сервера и прочитать информацию выданную файлом, в который отправили данные...

// читаем данные построчно и выводим их. конечно, эти данные можно использовать по своему усмотрению.

while($gets=fgets($fp,128)){

print $gets;

}

fclose($fp);
}
?> 

В ответ получаю 404 ошибку

Написал им письмо ака "...можно ли расчитывать на их поддержку..." пока тихо.

[deadbead]

И похоже на java-script задача не решается.

Решается через [censored] Все тот же iframe... Если нет возможности отловить событие noMouseUp то в принципе можно проверять (грубо) iframe.body.innerHTML по таймеру... Но как-то уж очень не хочется... Кривовато

[digger®]

Вот как я пробую формировать и отправлять запрос: (жалко нет раскраски синтаксиса )
...
В ответ получаю 404 ошибку

Отправка неправильно сделана, параметры передаются, а сам файл нет.

[Mavn]

(жалко нет раскраски синтаксиса

это потому что ты используешь [code][/code] а нужно просто [php][/php]

[deadbead]

Я использую [cоde=php][/cоde] Кстати, что-то камнты в этом [php][/php] куда-то уехали за экран вообще) Поправили бы css)

Отправка неправильно сделана, параметры передаются, а сам файл нет.

Ммм... т.е. нужно сначала залить файл кудато в темпы на свой хост, а потом его в запрос пихать?

[digger®]

Я использую [cоde=php][/cоde] Кстати, что-то камнты в этом [php][/php] куда-то уехали за экран вообще)
Ммм... т.е. нужно сначала залить файл кудато в темпы на свой хост, а потом его в запрос пихать?

Чтобы скрипт внутри форума мог куда то передать файл, этот файл должен быть ему доступен. Соответственно файл сначала заливается в темп на форуме, потом скриптом отправляется на ipicture.
Скрипт рабочий и ipicture отвечает не 404, а "не указан файл для заливки".
Поcмотри любой пример на php про заливку файлов через post и исправь свой скрипт.

[deadbead]

Нашел как заливаются через пост файлы... однако теперь в ответ от ipicture получаю 400 Bad Request  <?
$_FILES["img"]["name"] = "img.jpg";
$_FILES["img"]["tmp_name"] = "/home/test1.ru/www/smp.jpg";

$url = "http://ipicture.ru/Upload/index.php";

$parse_url = parse_url($url);
$path = $parse_url["path"];
if($parse_url["query"]) $path .= "?" . $parse_url["query"];
$host = $parse_url["host"];

$mdata = array(

"method" => "file",

"userurl" => "",

"orig_resize" => "640",

"rotate" => "0",

"string_big" => "More",

"optimize" => "on",

"status" => "on",

"quality" => "85",

"thumb_resize_on" => "on",

"thumb_resize" => "180",

"string_small" => "More",

"galleries" => "12",

"comment" => ""
);

$fp = fopen($_FILES["img"]["tmp_name"], "r");
if($fp){
  $_FILES["img"]["content"] = "";
  while($gets=fgets($fp,128)){
      $_FILES["img"]["content"] .= fgets($fp,128);
  }
  fclose($fp);
  
  $fp = fsockopen($host, 80, $errno, $errstr, 10);
  if($fp){
    foreach($mdata as $key => $val) if($key != "" && $val != "") $data .= ($data == "" ? "" : "&").$key."=".$val;
    $data .= ($data == "" ? "" : "&")."filename=".$_FILES["img"]["name"]."&content=".$_FILES["img"]["content"];

$out = "post ".$path." http/1.1\n";

$out .= "host: ".$host."\n";

$out .= "referer: ".$url."\n";

$out .= "user-agent: opera\n";

$out .= "content-type: application/x-www-form-urlencoded\n";

$out .= "content-length: ".strlen($data)."\n\n";

$out .= $data."\n\n";

    fputs($fp, $out);

    $in = "";
    while($gets=fgets($fp,128)){

$in .= $gets;

}

fclose($fp);

    $fp = fopen("/home/test1.ru/www/in.html", "w");
    if($fp){
        fputs($fp, $in);
    } 
  }
}
?>Пробовал вместо $_FILES["img"]["content"] в запрос писать base64_encode($_FILES["img"]["content"]) - те же грабли...

[digger®]

Нашел как заливаются через пост файлы... однако теперь в ответ от ipicture получаю 400 Bad Request  [php]
...

Во жесть наворотил. Ладно, завтра нарисую работоспособный скрипт.

[deadbead]

Эм... Пример я нашел на spravkaweb
Не удачный пример?

Во жесть наворотил. Ладно, завтра нарисую работоспособный скрипт.

Ок. Спасибо. А с AJAX я разобрался. Буду юзать библиотеку Котерова JsHttpRequest.

P.S. Кстати, я решил, что не стоит лепить функционал отображения изображений и их добавления в один мод... Тем  более, что мод красивого отображение уже сделали) Так что тут будем обсуждать и делать только функционал AJAX загрузки...

Думаю в итоге (когда с вашей помощью разберусь как отправлять грамотно POST запросы) сделать поддержку нескольких хостингов (iPicture, ImageShack, Photobucket) и возможнось заливать картинки на свой собственный хост. Или нет... Для этого есть возможность прикреплять изображения к сообщению

[digger®]

А по поводу "работоспособного скрипта" пока не удалось решить? Руки чешутся)

Вообще мне в голову пришел самый простой и банальный путь.
Внизу окна создания сообщения рисуем просто html-форму загрузки файла, а получатель у нее - скрипт который на ipicture. Отсылаешь через нее файл сразу туда и ловишь ссылку, которая в ответ придет.

[deadbead]

Ммм... А разве в этом случае мы не перейдем на страницу iPicture по субмиту формы?

В любом случае на мой взгляд уж черезчур просто) От первоначальной задумки не остается вообще ничего

Я докопаюсь до сути) вы мне только направление задайте) Где можно посмотреть хороший (рабочий) пример отправки файлов через пост-запрос из php-скрипта?

[deadbead]

Эмм.... Это все?

[digger®]

Где можно посмотреть хороший (рабочий) пример отправки файлов через пост-запрос из php-скрипта?

http://www.softtime.ru/scripts/post_copy.php

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

Когда можно сделать так:
в форум повесить форму которая сразу грузит на ipicture, потом поймать ответ и что-то сделать.

[deadbead]

Мммм... Тогда как отправить данные скрипту на ipicture и получить ответ без перегрузки страницы? через фреймы не хочу.... Как тогда?

[digger®]

Мммм... Тогда как отправить данные скрипту на ipicture и получить ответ без перегрузки страницы? через фреймы не хочу.... Как тогда?

Рискуя показаться банальным - могу написать мод
Но не сейчас. Позже.

[mirabo]

Всё заглохло? Жаль, хорошая идея

[deadbead]

К сожалению digger потерял интерес к идее.... Я же остаюсь в неведении как отправить данные скрипту на удаленном хосте и получить ответ без перегрузки страницы

Может есть на форуме еще люди знающие как это реализовать? Или digger все таки нарисует примерчик...