Как прочитать компьютерный файл, используя 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 = '';
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 может использоваться, то есть для воспроизведения аудиофайла в видеотеге.

Повеселись