Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 26.04.2015
Сообщений: 26

Отображение загруженных фото перед отправки формы

04.05.2015, 22:22. Показов 579. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Помогите люди добрые. Все уже перерыл. А талкового нечего не нашел.
Задача отобразить отправляемый файл, возмоно несколько фотографий.
И при нажатий на кнопку выслать форму и фотки мне на емейл.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
04.05.2015, 22:22
Ответы с готовыми решениями:

Расположением формы обратного звонка и отображение открытого фото на странице товара
На сайте http://imbir.com.ua/ при нажатии на колбек справа внизу, форма появляется в центре страницы, а не в центре экрана, так же при...

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

Отображение второй формы после отправки первой (и скрытие первой)
Добрый день! Подскажите пожалуйста как сделать так, чтобы после отправки формы обратной связи она закрывалась, а вместо нее открывалась...

4
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
04.05.2015, 23:38
Цитата Сообщение от AreeeS Посмотреть сообщение
Задача отобразить отправляемый файл, возможно несколько фотографий.
А если это внезапно будут не фотографии, а какой-нибудь архив или exe-шник, то что делать? В общем, смотрите пример для изображений (image/*) и текстовых файлов (text/plain).
HTML5
1
2
<input type="file" id="myfile" multiple>
<div id="preview"></div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function previewFiles(evt) {
    var files = evt.target.files;
    for (var i = 0, f; i < files.length; i++) {
        f = files[i];
        var ftype = f.type.substring(0, f.type.indexOf('/'));
        if (['image', 'text'].indexOf(ftype) == -1) continue;
        
        var reader = new FileReader();
        reader.onload = (function () {
            return function (e) {
                var output;
                if(ftype == 'image') {
                    output = document.createElement('img');
                    output.classList.add('thumb');
                    output.src = e.target.result;
                } else {
                    output = document.createElement('textarea');
                    output.classList.add('tarea');
                    output.value = e.target.result;
                }
                document.getElementById('preview').appendChild(output);
            };
        })();
        reader[ftype == 'image' ? 'readAsDataURL' : 'readAsText'](f);
    }
}
document.getElementById('myfile').addEventListener('change', previewFiles);
1
0 / 0 / 0
Регистрация: 26.04.2015
Сообщений: 26
04.05.2015, 23:50  [ТС]
Супер. Спасибо. Я так долго искал такой простой вариант!!!!
Поставлю ограничения, но это потом. Диплом горит)

Добавлено через 7 минут
Еще вопросец. Что бы выслать мне эти файлы на емейл, смогу я через форму обратной связи выслать их себе на почту через масив files[i]?
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
05.05.2015, 00:24
AreeeS, Отправка почты реализуется на сервере и JS к этому уже не имеет никакого отношения (если только это не NodeJS).
0
0 / 0 / 0
Регистрация: 26.04.2015
Сообщений: 26
05.05.2015, 08:31  [ТС]
Мб кто подскажет решение 2 части проблемы отправка фото на емейл??
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.05.2015, 08:31
Помогаю со студенческими работами здесь

Реализация отправки фото в чате wifi-direct
Необходимо реализовать передачу фото в чате посредством wi-fi direct, как использовать камеру мне понятно, но ничего не получается с самой...

Изменение кодировки перед отправки POST
Здравствуйте, собственно нужно отправить POST запрос, но перед этим изменить кодировку из textBox (туда записываются русские буквы) на...

Вывод модальной формы после отправки формы AJAX
Здравствуйте, помогите, пожалуйста, разобраться, есть модальная форма arcticmodal для просмотра этой формы можно найти её в поисковике, она...

Как задать стиль переменой перед отправки на почту?
здравствуйте подскажите пожалуйста как задать стиль переменой перед отправке на почту : $letter = Вы запросили восстановление пароля...

Фото книги - какой программой обработать перед преобразованием в pdf
Есть папка с фотографиями книжки, сделанными достаточно плохо, под небольшим углом, с не полностью развернутыми страницами, не сделано...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru