Как прочитать компьютерный файл, используя Javascript в Браузере

FileReader object позволяет веб-приложениям асинхронно читать содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя, используя объекты File или Blob для указания файла или данных для чтения. Один простой способ получить доступ к локальным файлам через Элемент формы HTML, который даст вам доступ только для чтения.

Чтобы проверить, поддерживает ли браузер API FileReader, используйте следующее «if» заявление :

if (window.File && window.FileReader && window.FileList && window.Blob) {
// Read files
} else {
alert('The File APIs are not fully supported by your browser.');
}

Файл (или Blob) может быть прочитан разными способами разными способами благодаря API FileReader:

Каждый метод ожидает файл в качестве первого параметра, чтобы извлечь файл (или файлы, если существует несколько атрибутов), выбрать элемент DOM и получить значение свойства files.

var files = document.getElementById("myFileInput").files;
//
var firstOrUniqueFile = files[0];
if(firstOrUniqueFile){
// Do something with the file
}

Замечания: это значение является массивом (FileList), поэтому вам нужно напрямую обращаться к файлу с индексом 0, если входной файл не кратен.

Чтение файлов

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

В этой статье вы узнаете, как использовать readAsText а также readAsDataURL методы правильно.

readAsText

readAsText Метод используется для чтения содержимого указанного файла (или BLOB-объекта). Когда операция чтения завершена, readyState изменяется на DONE, лоаденд срабатывает, а result Атрибут цели содержит содержимое файла в виде текстовой строки.

Этот метод ожидает в качестве параметра секунды (необязательно) кодификацию текста.

Используйте следующий фрагмент, чтобы получить текстовое содержимое файла:


Select a file from your computer to being read as text.

document.getElementById("filetoRead").addEventListener("change",function(){ var file = this.files[0]; if (file) { var reader = new FileReader(); reader.onload = function (evt) { console.log(evt); document.getElementById("editor").value = evt.target.result; }; reader.onerror = function (evt) { console.error("An error ocurred reading the file",evt); }; reader.readAsText(file, "UTF-8"); } },false);

Протестируйте предыдущий код в следующем фрагменте, он будет считывать содержимое файла с вашего компьютера, не связываясь с каким-либо сервером при выборе файла:

readAsDataURL

readAsDataURL Метод используется для чтения содержимого указанного файла (или BLOB-объекта). Когда операция чтения завершена, readyState становится DONEи loadEnd срабатывает. В то время атрибут результата цели содержит the data as a URL, представляющий данные файла в виде base64 закодированная строка.

Следующий код позволяет вам прочитать изображение с вашего устройства и преобразовать его в строку base64. Тогда это будет показано в теге img внутри div:


Select an image from your PC to convert it to Base64 and display it in this document

document.getElementById("filetoRead").addEventListener("change",function(){ var file = this.files[0]; if (file) { if ((file.type == 'image/png') || (file.type == 'image/jpg') || (file.type == 'image/jpeg') ){ var reader = new FileReader(); reader.onload = function (evt) { var imgTag = 'my image'; document.getElementById("image-container").innerHTML = imgTag; alert("Image succefully loaded"); }; reader.onerror = function (evt) { console.error("An error ocurred reading the file",evt); }; reader.readAsDataURL(file); }else{ alert("Please provide a png or jpg image."); return false; } } },false);

Поиграйте со следующей скрипкой и выберите файл для отображения в браузере:

Как видите, он фильтрует только изображения в формате png или jpg, используя простой фильтр с mimetype файла (вы можете фильтровать по его расширению, а не по mimetype вручную). ReadAsDataURL может использоваться, то есть для воспроизведения аудиофайла в видеотеге.

Повеселись

Ссылка на основную публикацию
Adblock
detector