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

@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 части проблемы отправка фото на емейл??

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

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

	Отображение загруженных фото перед отправки формы 04.05.2015, 22:22. Показов 615. Ответов 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