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

@AreeeS · Регистрация: 26.04.2015

Студворк — интернет-сервис помощи студентам

Помогите люди добрые. Все уже перерыл. А талкового нечего не нашел.
Задача отобразить отправляемый файл, возмоно несколько фотографий.
И при нажатий на кнопку выслать форму и фотки мне на емейл.

@Lazy_Den · 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);

@AreeeS · 04.05.2015, 23:50 **[ТС]**

Супер. Спасибо. Я так долго искал такой простой вариант!!!!
Поставлю ограничения, но это потом. Диплом горит)

Добавлено через 7 минут
Еще вопросец. Что бы выслать мне эти файлы на емейл, смогу я через форму обратной связи выслать их себе на почту через масив files[i]?

@Lazy_Den · 05.05.2015, 00:24

AreeeS, Отправка почты реализуется на сервере и JS к этому уже не имеет никакого отношения (если только это не NodeJS).

@AreeeS · 05.05.2015, 08:31 **[ТС]**

Мб кто подскажет решение 2 части проблемы отправка фото на емейл??

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@AreeeS 0 / 0 / 0 Регистрация: 26.04.2015 Сообщений: 26

	Отображение загруженных фото перед отправки формы 04.05.2015, 22:22. Показов 584. Ответов 4 Метки нет (Все метки) Помогите люди добрые. Все уже перерыл. А талкового нечего не нашел. Задача отобразить отправляемый файл, возмоно несколько фотографий. И при нажатий на кнопку выслать форму и фотки мне на емейл. 0

@AreeeS 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

@AreeeS 0 / 0 / 0 Регистрация: 26.04.2015 Сообщений: 26
	05.05.2015, 08:31 [ТС]
	Мб кто подскажет решение 2 части проблемы отправка фото на емейл?? 0

Опции темы