Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

JS filereader

JS filereader

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

Вообще, для того чтобы загрузить файл в браузер нам достаточно воспользоваться API FileReader.

Допустим у нас есть следующий код.

<input type="file" id="upload"  />
 <div id="container"></div>

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

Давайте загрузим картинку.

document.getElementById('upload').addEventListener('change', function() { 
            var file;
            var el = document.getElementById('container');/*Получаем элемент блок контейнера*/
            el.innerHTML = ''; /*Обнуляем блок контейнер при каждой загрузке файлов*/
           var  len = this.files.length;/*Считаем количество загружаемых файлов за раз*/
           for(var x = 0; x < len; x++) { /*Перебираем файлы с помощью цикла*/
                file = this.files[0];/*Получаем содержимое файла*/
                var reader = new FileReader(); /*Создаем объект reader класса FileReader*/
                    reader.onload = function(e) { /*Создаем  обработчик загрузки файла */
                        var img = new Image(); /*Создаем изображение*/
                        img.src = e.target.result;  /*В качестве пути указываем содержимое файла*/
                       el.appendChild(img);/*Помещаем изображение в контейнер*/
                    };
				reader.readAsDataURL(file);/*Преобразовываем содержимое файла в кодировку base64*/
               
				}
        });

Для этого мы создали обработчик который срабатывает при изменении содержимого поля c идентификатором upload. Cодержимое в обработчике я тщательно прокомментировал, поэтому здесь подробно останавливаться не буду.

В результате работы данного кода мы сможем загружать изображения в браузер и они там будут отображаться. Однако, если мы перезагрузим страницу. Загруженных изображений мы там увы не увидим. API FileReader загружает файлы в браузер, но не сохраняет их там. Для сохранения изображений мы можем воспользоваться другими API к примеру localStorage.

Давайте немного расcширим наш код:

document.getElementById('upload').addEventListener('change', function() {
            var file;
            var el = document.getElementById('container');
            el.innerHTML = '';
           var  len = this.files.length;
           for(var x = 0; x < len; x++) {
                file = this.files[0];
                var reader = new FileReader();
                    reader.onload = function(e) {
                        var img = new Image();
                        img.src = e.target.result; 
                      el.appendChild(img);
                      localStorage.setItem('avatar',e.target.result);
                    };

                    reader.readAsDataURL(file);
                 }
        });

            var img = new Image();
            img.src = localStorage.getItem('avatar') ? localStorage.getItem('avatar') : '' ;
			document.getElementById('container').appendChild(img);
            document.querySelector('#load').setAttribute('href',localStorage.getItem('avatar') ? localStorage.getItem('avatar') : '');

Вот теперь все работает! После перезагрузки страницы загруженная картинка также отображается. Здесь мы воспользовались возможностями локального хранилища localStorage которое сохраняет данные в браузере пользователя. В качестве данных локального хранилища мы указали содержимое файла которое подставляется в качестве пути генерируемой картинки после перезагрузки страницы. Конечно это не идеальное решение, так как если мы зайдем через другой браузер, загруженной картинки мы там не увидим. Выделенное место для хранения данных локального хранилища также ограничено 5мб. Cрок хранения неопределен, но не бесконечен. В общем делайте выводы сами.

Используя API FileReader мы можем загружать в браузер и другие файлы. К примеру давайте загрузим и выведем в браузер содержимое текстового файла c расширением txt.

document.getElementById('upload').addEventListener('change', function() {
            var file;
            var el = document.getElementById('container');
            el.innerHTML = '';
           var  len = this.files.length;
           for(var x = 0; x < len; x++) {
                file = this.files[0];
                var reader = new FileReader();
                    reader.onload = function(e) {

                        el.innerHTML = e.target.result;
                      localStorage.setItem('avatar',e.target.result);
                    };
                    reader.readAsText(file);

           }
        });

document.getElementById('container').innerHTML =  localStorage.getItem('avatar') ? localStorage.getItem('avatar') : '';

Здесь я загрузил и вывел содержимое текстового файла в браузер. Обратите внимание на метод который я использую для преобразования содержимого файла в кодировку base64. Для картинок я пользовался методом readAsDataURL(), а здесь же readAsText(). Как вы наверное догадались для отображения содержимого файлов в текстовом формате используется метод readAsText().

Всего для преобразования могут использоваться четыре метода readAsDataURL(),readAsText(), readAsArrayBuffer() и readAsBinaryString. Впрочем можете экспериментировать.

Подводя итоги скажу. Используя API FileReader мы можем ограничить себя от загрузки пользовательских файлов на сервер, просто работая с ними на клиентской стороне. Тем самым снижая нагрузку на сервер и риск загрузки вредоносных файлов со стороны пользователей. В общем делайте выводы сами.

На этом данная статья подошла к концу. Желаю вам успехов и удачи! Пока!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm