Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / input file upload original_image и preview / 20 сообщений из 20, страница 1 из 1
21.04.2014, 11:10
    #38620182
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Добрый день.

Ничего похожего на форуме не нашел или не по тем словами искал.

Задача - грузить на сервер изображение и его уменьшенную копию для превью.
Проблема - сделать это нужно средствами JS. Сервер - самописное дельфовое нечто.

Через input file пользователь выбирает картинки и при загрузке с каждой из них должно грузиться их превью.

Я сейчас исследую как работает canvas и уже смог уменьшить размер и даже получить toDataURL("image/jpeg") уменьшенный на выходе. А вот у массива файлов не получилось даже имя поменять у выбранного файла. Изначально хотел в files[] импута добавить новые элементы и туда как-то подпихнуть уменьшенную копию.

Можете что-нибудь посоветовать?
...
Рейтинг: 0 / 0
21.04.2014, 12:44
    #38620295
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Gustly,

http://blueimp.github.io/jQuery-File-Upload/basic.html
мы используем jquery.upload для загрузки+ffmpeg или imagemagick для генерации превью
...
Рейтинг: 0 / 0
21.04.2014, 13:05
    #38620330
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
-k2-,

Я так понял ffmpeg или imagemagick прикручиваются к веб серверу. У меня с ним работать нет возможности. Я даже не знаю какой он. Предположительно родной java, который идет с APEX, запустил и забыл. Да и в списке серверов нет похожего ничего.

Хотелось бы все таки на JS. Как-нибудь расширить массив инпута для отправки и искусственно туда влепить файл.
...
Рейтинг: 0 / 0
21.04.2014, 13:11
    #38620337
FatalPHPError
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Задача - грузить на сервер изображение и его уменьшенную копию для превью.
Проблема - сделать это нужно средствами JS. Сервер - самописное дельфовое нечто.
Никак. Обработкой файла и его размещением занимается серверная сторона.
...
Рейтинг: 0 / 0
21.04.2014, 13:15
    #38620339
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
FatalPHPError,

Библиотеку для ресайза уже нашел. Пока что придумал, чтобы в базу в CLOB поле писать строку типа
Код: javascript
1.
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAKBueI


Но мне такой вариант не нравится.
...
Рейтинг: 0 / 0
21.04.2014, 13:21
    #38620345
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Gustly,

ffmpeg или imagemagick - для генерации превью

для загрузки jquery.upload, он кстати и превью умеет делать
https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing
нам пакетная обработка нужна была, плюс форматы
не устоялись, поэтому мы использовали не его
...
Рейтинг: 0 / 0
21.04.2014, 13:25
    #38620353
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
у вас видимо оракл, раз apex
я бы спросила в соответствующем форуме http://www.sql.ru/forum/oracle-apex
...
Рейтинг: 0 / 0
21.04.2014, 14:29
    #38620454
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
-k2-,

А Вы как с ним работаете? Мне само превью надо отправлять на сервер.
...
Рейтинг: 0 / 0
21.04.2014, 15:09
    #38620535
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Gustly,

мы превью делаем на сервере, не на клиенте
...
Рейтинг: 0 / 0
21.04.2014, 15:47
    #38620590
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
-k2-,

А что у Вас за сервер?
...
Рейтинг: 0 / 0
21.04.2014, 15:54
    #38620597
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Gustly,

снаружи nginx, внутри apache
как я понимаю у вас апекс вполне может быть на апаче
...
Рейтинг: 0 / 0
21.04.2014, 16:05
    #38620613
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
...
Рейтинг: 0 / 0
21.04.2014, 16:09
    #38620617
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
...
Рейтинг: 0 / 0
21.04.2014, 16:13
    #38620625
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
...
Рейтинг: 0 / 0
22.04.2014, 00:49
    #38620971
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
После ресайза канвой имеем строку base64.
Ее можно превратить в блоб, используя функцию atob, байтовый ArrayBuffer и конструктор блоба - пример есть в мозилловской доке.
Потом FormData.

Тогда на сервер придут готовые файлы, как если бы их отправили формой с двумя инпутами.
...
Рейтинг: 0 / 0
22.04.2014, 01:04
    #38620977
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Понятное дело на ИЕ будут трудности.
Я бы на месте автора проявил мужество, поковырявшись в самописном делфовом нечте и сделал превью на сервере.
...
Рейтинг: 0 / 0
22.04.2014, 09:49
    #38621112
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
Яростный Меч,

Можно по подробнее про FormData ? Мне нужно еще один XMLHttpRequest(); сделать для отправки превью? Как отправлять несколько превью за раз? Если в изначальный импут было выбрано несколько файлов?
...
Рейтинг: 0 / 0
22.04.2014, 15:20
    #38621677
Малыхин Сергей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
...
Рейтинг: 0 / 0
22.04.2014, 16:57
    #38621883
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
http://jsfiddle.net/rsXTj/ - вот тут реализация canvas.toBlob (готовый есть только в FF, хотя в спецификации прописано).

ну а как отправить - см. приведенные ссылки.
...
Рейтинг: 0 / 0
22.04.2014, 20:41
    #38622182
Малыхин Сергей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
input file upload original_image и preview
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / input file upload original_image и preview / 20 сообщений из 20, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]