Загрузка и превью изображений без перезагрузки страницы?

Question

Никита Колосов @Anexroid

Загрузка и превью изображений без перезагрузки страницы?

Сделал всё, как описано тут

Работает, фото отображаются. Однако, если фоток несколько, то приходится каждый input оборачивать в отдельную форму, т.к иначе при submit'е формы отправляется сначала одно фото, потом два фото, потом три фото и т.д. При оборачивании каждого фото в отдельную форму каждый раз отправляется только одно фото, что, собственно, и правильно.

Но возникает следующая проблема: Если помимо загрузки файлов в форме есть другие элементы, то получаются вложенные формы, которые не работают.

Вопрос — что делать в такой ситуации?

Вопрос задан более трёх лет назад
16905 просмотров

3 комментария

Подписаться 7 Оценить 3 комментария

Никита Колосов @Anexroid Автор вопроса
Пока что, единственно решение, которое пришло в голову — после загрузки изображения, заменять в котором был input file, на изображение и с именем изображения, а при нажатии кнопки submit вставлять тег вокруг нужных данных и делать submit уже внешней формы.

Пример:
Было:

... <input type="text" name="data1" /> ... <form action="#"> <input type="file" name="photo" /> </form> <form action="#"> <input type="file" name="photo" /> </form> <form action="#"> <input type="file" name="photo" /> </form> ... <input type="text" name="data2" /> ...

Стало:

... <form action="#"> ... <input type="text" name="data1" /> ... <input type="hidden" name="photo[]" value="filename1" /> <img src="/preview/filename1" /> <input type="hidden" name="photo[]" value="filename2" /> <img src="/preview/filename2" /> ... <input type="text" name="data2" /> ... </form> ...

Но что то мне подсказывает, то есть более простое решение
Написано более трёх лет назад
Elendai @Elendai
Хе. А не всегда можно оборачивать. Проблема, с которой столкнулся сам когда-то: форма добавления товара в интернет-магазине.
И, Anexroid, ваше решение не подойдет, потому как форма уже должна быть, чтоб и без загрузки изображений можно было создать (изменить) товар. Ну или закопаться в js.
Решение было найдено такое:

<form method="POST" enctype=multipart/form-data" action="экшон сохранения картинки" target="saveFrame"> Наименование <input type="text" value="стул" name="name"/> <input type="file" multiple="multiple" name="loadfile[]" onchange="submit()"/> </form> <iframe id="hFrame" style="display: none" name="saveFrame"/>

А саму форму мы сериализуем и сохраняем аяксом c return false.
Написано более трёх лет назад
Elendai @Elendai

Простите, но код не подкрасился.
Да и не дописал… утро…
Так вот. Я бы при ответе iframe — «window.parent.afterImageLoaded();» удалял бы ненужный уже инпут и всего делов.
Хочется все сохранить (доп. данный) — аякс. Не хочется — хмем крестик у картинки, по которому вместо превью встает пустой инпут.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

Комментировать

2 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 33 минуты назад
- 12 просмотров
0

ответов
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- час назад
- 49 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- час назад
- 39 просмотров
1

ответ
JavaScript

+1 ещё

Средний
При создании PWA ошибка Cannot read properties of null (reading 'prompt'), в чем проблема?
- 1 подписчик
- 4 часа назад
- 30 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 4 часа назад
- 88 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 15 часов назад
- 39 просмотров
0

ответов
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 20 часов назад
- 53 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 21 час назад
- 129 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 23 часа назад
- 52 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 110 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Нарисовать рекламный креатив для ios приложения

25 апр. 2024, в 12:26

10000 руб./за проект

Верстка

25 апр. 2024, в 12:23

2500 руб./за проект

ASO дизайн для ios приложения (Иконка+Скриншоты)

25 апр. 2024, в 12:21

10000 руб./за проект

Пока что, единственно решение, которое пришло в голову — после загрузки изображения, заменять в котором был input file, на изображение и с именем изображения, а при нажатии кнопки submit вставлять тег вокруг нужных данных и делать submit уже внешней формы.

Пример:
Было:

... <input type="text" name="data1" /> ... <form action="#"> <input type="file" name="photo" /> </form> <form action="#"> <input type="file" name="photo" /> </form> <form action="#"> <input type="file" name="photo" /> </form> ... <input type="text" name="data2" /> ...

Стало:

... <form action="#"> ... <input type="text" name="data1" /> ... <input type="hidden" name="photo[]" value="filename1" /> <img src="/preview/filename1" /> <input type="hidden" name="photo[]" value="filename2" /> <img src="/preview/filename2" /> ... <input type="text" name="data2" /> ... </form> ...

Но что то мне подсказывает, то есть более простое решение
Хе. А не всегда можно оборачивать. Проблема, с которой столкнулся сам когда-то: форма добавления товара в интернет-магазине.
И, Anexroid, ваше решение не подойдет, потому как форма уже должна быть, чтоб и без загрузки изображений можно было создать (изменить) товар. Ну или закопаться в js.
Решение было найдено такое:

<form method="POST" enctype=multipart/form-data" action="экшон сохранения картинки" target="saveFrame"> Наименование <input type="text" value="стул" name="name"/> <input type="file" multiple="multiple" name="loadfile[]" onchange="submit()"/> </form> <iframe id="hFrame" style="display: none" name="saveFrame"/>

А саму форму мы сериализуем и сохраняем аяксом c return false.
Простите, но код не подкрасился.
Да и не дописал… утро…
Так вот. Я бы при ответе iframe — «window.parent.afterImageLoaded();» удалял бы ненужный уже инпут и всего делов.
Хочется все сохранить (доп. данный) — аякс. Не хочется — хмем крестик у картинки, по которому вместо превью встает пустой инпут.

Answer 1 · 2012-10-24 14:51:03

FedLab @FedLab

может подойдет еще blueimp.github.com/jQuery-File-Upload/

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2012-10-24 03:28:10

kellishaver.tumblr.com/post/21428272282/using-the-file-api-to-preview-images-before-uploading + github.com/Jahdrien/FileReader для старых браузеров. Это если делать все не задействуя сервер вообще, только на клиенте.

Для вашей же беды… не вижу ничего сложного в том, что бы все инпуты были в одной форме.

<form method="POST" enctype=multipart/form-data" action="backend.php">
    <input type="file" name="preview[]" />
    <input type="file" name="preview[]" />
    <input type="file" name="preview[]" />
</form>

Скажем… при нажатии на кнопку attach добавляйте в скрытую форму еще один инпут и ссылайтесь уже на новое поле. И т.д. и т.д. Хотя поидее если вам нужно сразу после выбора файла отображать данные, то опять же проблемы с тем что одна картинка на запрос не будет.

Что-то в этом духе. Вообще мультиаплоадеров много, которые работают и в старых браузерах.

Загрузка и превью изображений без перезагрузки страницы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт