Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как осуществить загрузку изображения с последующим редактированием размера? (https://javascript.ru/forum/misc/49867-kak-osushhestvit-zagruzku-izobrazheniya-s-posleduyushhim-redaktirovaniem-razmera.html)

braveheart 01.09.2014 14:10

Как осуществить загрузку изображения с последующим редактированием размера?
 
:help: Столкнулся с такой задачей:
Необходимо с помощью fileAPI реализовать загрузку и "обрезку изображения" как в примере Userpic + Crop (rubaxa.github.io/jquery.fileapi).

При выполнении данного кода примера, выходит ошибка:

...
  else if( file ){
         $('#popup').modal({
            closeOnEsc: true,
            closeOnOverlayClick: false,
            ...



    TypeError: $(...).modal is not a function/



Метода modal() (всплывающее окно) у меня нет, т.е. необходимо самому заменить/написать этот элемент.
Как правильно написать этот участок кода, чтобы я смог:

1) При нажатии кнопки - выходит окно браузера для выбора локального файла
2) После выбора необходимого файла, открываем попап и вставляем изображение туда (где есть только одна кнопка под изображение - 'Upload')

В общем-то все как в примере, только вот всплывающее окно, затормозило весь процесс...:-?

WorM32 01.09.2014 14:55

Подключить к странице jQuery UI с modal?

braveheart 01.09.2014 15:36

Дело в том что, использовать JQuery UI, это было бы достаточно просто и не возникло бы проблем, но ситуация такова что есть уже написанный попап, который вызывается при условии того что ссылка будет иметь класс js-popup-btn.
Но я не знаю что писать в самом попапе, к примеру:
<div class="popup">
 Принимаем изображение
 Выводим выделение для кропа
 Отображаем кнопку для загрузки изображения с кропом
</div>


и что написать вместо:
('#popup').popup({
  onOpen: function (overlay){
	  $(overlay).on('click', '.js-upload', function (){
	    $.modal().close();
	    $('#userpic').fileapi('upload');
      });
..

в самом скрипте.
Подскажите как это реализовать?

skrudjmakdak 01.09.2014 15:41

Цитата:

Сообщение от braveheart (Сообщение 328431)
Дело в том что, использовать JQuery UI, это было бы достаточно просто и не возникло бы проблем

т.е. создавать свой велосипед куда лучше?

Цитата:

Сообщение от braveheart (Сообщение 328431)
но ситуация такова что есть уже написанный попап, который вызывается при условии того что ссылка будет иметь класс js-popup-btn.

хорошо, свой велосипед мы создали. найди класс js-popup-btn, привяжи событие к нему по которому будешь открывать свое изобретение..

braveheart 01.09.2014 16:37

Цитата:

Сообщение от skrudjmakdak (Сообщение 328432)
т.е. создавать свой велосипед куда лучше?


хорошо, свой велосипед мы создали. найди класс js-popup-btn, привяжи событие к нему по которому будешь открывать свое изобретение..

Дело не в том чтобы я не хотел использовать JqueryUI. Сказали что есть уже готовый метод, чтобы не делать дубликатов )

braveheart 01.09.2014 18:15

Цитата:

Сообщение от skrudjmakdak (Сообщение 328432)
т.е. создавать свой велосипед куда лучше?


хорошо, свой велосипед мы создали. найди класс js-popup-btn, привяжи событие к нему по которому будешь открывать свое изобретение..

К сожалению у меня не получается сделать.
Пробовал по примеру повторить с modal() в JSFiddle, таже самая ситуация


Часовой пояс GMT +3, время: 02:17.