Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
3 / 3 / 5
Регистрация: 09.08.2012
Сообщений: 223
1

Множественное превью загружаемых изображений

28.01.2016, 00:31. Показов 805. Ответов 1
Метки нет (Все метки)

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

Javascript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="gallery">
    <ul>
        <li>
            <label class="filebutton">
            <img id="output" src="..." alt="image"/>
            <input type="file" name="userfile" value="" accept="image/*" onchange="loadFile(event)">
            </label>
        </li>
        <li>
            <label class="filebutton">
            <img id="output" src="..." alt="image"/>
            <input type="file" name="userfile" value="" accept="image/*" onchange="loadFile(event)">
            </label>
        </li>
        <li>
            <label class="filebutton">
            <img id="output" src="..." alt="image"/>
            <input type="file" name="userfile" value="" accept="image/*" onchange="loadFile(event)">
            </label>
        </li>
    </ul>
</div>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.01.2016, 00:31
Ответы с готовыми решениями:

Загрузчик изображений с превью на HTML5. Превью без загрузки
Здравствуйте, уважаемые! Есть острая необходимость создать на сайте возможность загружать...

Создание превью изображений
Наткнулся на такой скрипт, создает превью изображений как добиться чтобы под каждой превью была...

Выбор изображений для загрузки и их превью
Недавно решил перейти на multiple input file, но после этого возникли проблемы со скриптом. До...

Загрузка изображений с превью и последующей загрузкой на сервер
Добрый день! Понадобилось соорудить именно такую функцию: есть форма с данными (имя, город,...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
1
3230 / 2776 / 1395
Регистрация: 15.01.2014
Сообщений: 6,089
28.01.2016, 02:03 2
belltone, на странице не может быть несколько элементов с одинаковыми id (этой ошибке у новичков, наверно, нет конца). Смотрим пример
Javascript
1
2
3
4
5
6
7
8
9
10
[].forEach.call(document.querySelectorAll('input[name="userfile"]'), function(inp) {
  inp.addEventListener('change', function() {
    var reader = new FileReader(),
      img = this.previousElementSibling;
    reader.onload = function() {
      img.src = reader.result;
    };
    reader.readAsDataURL(this.files[0]);
  }, false);
});
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.01.2016, 02:03

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Ajax массовая загрузка изображений на сервер с превью
Умные люди помогите, есть форма отправки изображений но не работает, что нужно изменить в php что...

Изменение размера загружаемых изображений
У меня вот такой скрипт &lt;?php //ширина и высота в пикселях define('MAX_HEIGHT', 3000);...

Сохранение изображений, загружаемых на страницу, в базе данных
Здраствуйте. Кто знает, скажите пожалуйста ресурс, где подробно описывается следующая технология -...

Превью изображений
Как правильно уменьшить изображения в html по минимуму прибегая к javascript и css? У меня превью...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.