Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.10.2019, 10:30
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Как исправить скрипт мультизагрузки?
Доброго дня всем
Помогите исправить скрипт мультизагрузки файлов. Есть такой код

HTML

<output id="list"></output>

<div class="input-group cust-file-button">
    <div class="custom-file">
        <input type="file" class="img" id="files" name="file[]" accept="image/*" multiple>
    </div>
</div>


function handleFileSelect(evt) {
    let files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (let i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

       let reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                let span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result,
                    '" title="', theFile.name, '"/><span class="delete_img">Удалить</span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);


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

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 19.10.2019, 10:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LingVist
если сначала выбрать один файл, потом добавить другой, потом третий
Для того и multiple, чтобы выбрать множество, а одним полем сначала один, потом другой, ... в итоге и будет загружен который выбирался последним.
Ответить с цитированием
  #3 (permalink)  
Старый 19.10.2019, 10:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от LingVist
Вопрос в том, как сделать так, чтобы можно было добавлять файлы по одному и они все передавались бы в обработчик.
Заведите переменную, в которой будет находится массив списков файлов.
Ответить с цитированием
  #4 (permalink)  
Старый 19.10.2019, 11:03
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Сообщение от laimas
Для того и multiple, чтобы выбрать множество, а одним полем сначала один, потом другой, ... в итоге и будет загружен который выбирался последним.
Может быть такое, что у пользователя не всегда есть возможность выбрать сразу несколько файлов. Поэтому я и хочу сделать так, чтобы он мог добавлять по очереди. Вот только как это сделать технически, не знаю.
Ответить с цитированием
  #5 (permalink)  
Старый 19.10.2019, 11:16
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<input type="file" multiple>
<script>

const fileListArray = [];

document.querySelector("input[type=file]").addEventListener("change", event => {
	fileListArray.push(event.target.files);

	/* что-то делай с всеми файлами */
	console.log(fileListArray);
});

</script>


или так...
<input type="file" multiple>
<output></output>
<script>

const files = [];

document.querySelector("input[type=file]").addEventListener("change", event => {
	files.push(...event.target.files);

	/* что-то делай с всеми файлами, например, выведи имена файлов */
	document.querySelector("output").innerHTML =
		files.map(file => `<p>${file.name}</p>`).join("")
});

</script>

Последний раз редактировалось Malleys, 19.10.2019 в 11:25.
Ответить с цитированием
  #6 (permalink)  
Старый 19.10.2019, 11:51
Аспирант
Отправить личное сообщение для LingVist Посмотреть профиль Найти все сообщения от LingVist
 
Регистрация: 21.09.2010
Сообщений: 39

Спасибо. Второй вариант как раз подойдет
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт некорректно работает. Как можно исправить? antonhauff Javascript под браузер 11 16.01.2018 14:28
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как правильно поправить скрипт? Я не программист sergant Общие вопросы Javascript 0 15.11.2013 19:32
как составить скрипт автомат или как заменить форму вода Alastor Общие вопросы Javascript 7 28.10.2013 23:14
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25