ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / input file upload original_image и preview
20 сообщений из 20, страница 1 из 1
input file upload original_image и preview
    #38620182
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
Добрый день.

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

снаружи nginx, внутри apache
как я понимаю у вас апекс вполне может быть на апаче
...
Рейтинг: 0 / 0
21.04.2014, 15:54
| Ответить | Цитировать | Написать  
input file upload original_image и preview
    #38620613
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
http://hashcode.ru/questions/223029/javascript-изменение-размера-изображения-до-выгрузки-на-сервер
...
Рейтинг: 0 / 0
21.04.2014, 16:05
| Ответить | Цитировать | Написать  
input file upload original_image и preview
    #38620617
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
http://xdan.ru/Kak-sdelat-HTML5-zagruzchik-izobrazhenija.html
...
Рейтинг: 0 / 0
21.04.2014, 16:09
| Ответить | Цитировать | Написать  
input file upload original_image и preview
    #38620625
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
15771930
15782859
...
Рейтинг: 0 / 0
21.04.2014, 16:13
| Ответить | Цитировать | Написать  
input file upload original_image и preview
    #38620971
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
После ресайза канвой имеем строку base64.
Ее можно превратить в блоб, используя функцию atob, байтовый ArrayBuffer и конструктор блоба - пример есть в мозилловской доке.
Потом FormData.

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

Можно по подробнее про FormData ? Мне нужно еще один XMLHttpRequest(); сделать для отправки превью? Как отправлять несколько превью за раз? Если в изначальный импут было выбрано несколько файлов?
...
Рейтинг: 0 / 0
22.04.2014, 09:49
| Ответить | Цитировать | Написать  
input file upload original_image и preview
    #38621677
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник

FromData
Blob
...
Рейтинг: 0 / 0
22.04.2014, 15:20
| Ответить | Цитировать | Написать  
input file upload original_image и preview
    #38621883
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
http://jsfiddle.net/rsXTj/ - вот тут реализация canvas.toBlob (готовый есть только в FF, хотя в спецификации прописано).

ну а как отправить - см. приведенные ссылки.
...
Рейтинг: 0 / 0
22.04.2014, 16:57
| Ответить | Цитировать | Написать  
input file upload original_image и preview
    #38622182
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
http://jsfiddle.net/rsXTj/2/
...
Рейтинг: 0 / 0
22.04.2014, 20:41
| Ответить | Цитировать | Написать  
20 сообщений из 20, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / input file upload original_image и preview
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38622182&tid=1447169]:
 0ms
get settings:
 11ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 211ms
get topic data:
 13ms
get forum data:
 4ms
get page messages:
 82ms
get tp. blocked users:
 2ms
others: 246ms
total:  590ms
созд. / загр.: 590ms
x
x
Закрыть


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