Задача: Прочитать и вывести в браузер из 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);
}