js: Как прочитать файл с компьютера

Задача: Прочитать и вывести в браузер из js-скрипта локальный файл (текст или изображение), который пользователь выберет на своем компьютере.


Своя кнопка для выбора файла

Можно вместо стандартного элемента выбора файла показать свою кнопку. Скрываем элемент <input type="file"

HTML:

<input type="file" id="myfile" accept=".txt" style="display:none">
<button id="choosefile">Выбрать файл данных</button>
<span id="thefile"></span>   
<div id="out"></div>

accept=".txt" - чтобы для выбора были доступны только текстовые файлы

При клике на кнопке выполняем клик на скрытом стандартном элементе с id="myfile".

JS:

document.getElementById("choosefile").onclick = function(){
  document.getElementById("myfile").click();
}

Чтение и вывод текстового файла

Результат выбора пользователя доступен как массив, даже когда может быть выбран только один файл, и это первый файл в массиве, т.е. с индексом 0.

document.getElementById("myfile").onchange = function(e){	
	if (this.files==undefined) { // Отмена 
		return;
	}
	// Покажем имя файла this.files[0].name
	document.getElementById("thefile").innerHTML="Вы выбрали файл " + this.files[0].name;
	// Чтение файла
	readtheFile(this); 
	// если нужно, чтобы событие onchange происходило при выборе того же файла
	this.value = null; 
} // .onchange

function readtheFile(object) {	
  var file = object.files[0];  
  var reader = new FileReader();
  reader.onload = function() {    
	let rows = reader.result.split('\r\n'); // массив строк текстового файла
	var srt="";
	rows.forEach(function(entry) {
	  str+="<p>" + entry + "</p>";
	}); 
	// Покажем содержимое текстового файла
	document.getElementById('out').innerHTML = str;
  }
  reader.readAsText(file);  
}; //readtheFile(object) 

Как вывести изображение, выбранное через input

<input type="file" id="imgfile" accept=".jpg, .png">

Чтобы получить src, например, для img, можно использовать readAsDataURL 

document.getElementById("imgfile").onchange = function(){	
	if (this.files==undefined) { return;}
	var file = this.files[0]; 
	var reader = new FileReader();
	reader.onload = function(e) {    
		var image = document.createElement("img");
		image.src = e.target.result;        
		document.getElementById('outimg').appendChild(image);
	}
	reader.readAsDataURL(file);  
}
Или можно просто вызвать URL.createObjectURL(file)
document.getElementById("imgfile").onchange = function(){	
	if (this.files==undefined) { return;}
	var file = this.files[0];     
	var image = document.createElement("img");
	image.src = URL.createObjectURL(file);        
	document.getElementById('outimg').appendChild(image);	 
}
Запись опубликована в рубрике JavaScript

Добавить комментарий

Ваш адрес email не будет опубликован.