Для некоторых целей, в том числе и для нашего редактора, потребовалось загружать изображения. Тут же выяснилось, что на input type=file стили не навесить. То есть вот у нас красивый такой дизаин, а в середине аццкая кнопка стандарта os пользователя, причем он по ней ткнет, а файл нигде не появится, пока форму не отправишь.

На просторах сети было найдено несколько вариантов как сделать отправку картинки без перезагрузки страницы. На хабре есть стаья, где пытаются это делать через iframe. Еще есть плагин, который на flash-е (флешовая кнопка открывает окно загрузки). Но первый - не вглядывался, но к iframe-у стал относиться отрицательно. У второго - кнопку это дурацкую без правки flash-а не поменять, да и весит ~50кб. Но вот вчера, наконец, нашли:

Называется чудо сайтостроительной мысли “AJAX Upload”. Живет вот здесь.

Цепляется к чему угодно, дожидается загрузки изображения, возвращает результат итд. Можно настроить все под себя: мы например прицепили к нашей рисованной кнопочке, с сервера возвращаем адрес, куда залитую картинку сохранили и пихаем ее в редактор.

Функций и наворотов очень много. Примеры можно посмотреть здесь.

Единственный недостаток - не сделан как полноценный плагин к jquery, то есть для прикрепления конструкции как с jGrow не прокатывают. Но тоже ничего особенно сложного:

var button=$(”#upload_button”);
new AjaxUpload(button,{
action: ‘/bitrix/templates/mobisalenew/ajax/picload.php’,
name: ‘pic’,
onSubmit : function(file, ext){
this.disable();
},
onComplete: function(file, response){
this.enable();
}
});

Создаем переменную с объектом кнопки, запускаем функцию, предоставляемую плагином. В функции из основных параметров:

  • action - куда заливать
  • name - имя переменной, в которой файл отправится на сервер
  • onSubmit - функция запускаемая сразу после начала отправки файла (можно ей двигалку какую-нить вывести, чтобы пользователь понял, что картинка заливается)
  • onComplete - функция, которая срабатывает после ответа сервера (когда картинка залилась), в ней есть переменная response, в которой этот самый ответ и хранится

Про то, что на стороне серверной части в кратце скажу, что там приходит массив $_REQUEST['perem'] в нем есть данные о типе файла, размерах, месте временного хранения. И собсно делаем с ним что хотим (я в битрикс сохраняю в b_file, чтобы дальше пользовать)