Відповіді:
Ось приклад використання FileReader:
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
displayContents(contents);
};
reader.readAsText(file);
}
function displayContents(contents) {
var element = document.getElementById('file-content');
element.textContent = contents;
}
document.getElementById('file-input')
.addEventListener('change', readSingleFile, false);
<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>
http://dev.w3.org/2006/webapi/FileAPI/
nullкожної onClickподії повинно зробити трюк, див .: stackoverflow.com/a/12102992/63011
FileReader, але коментар до displayContentsсказаного: зауважте, що таке налаштування innerHTMLз недовірливим вмістом може бути вразливим для безпеки. (Щоб переконатися в цьому, створіть таке, bad.txtщо містить щось подібне, <img src="/nonexistent" onerror="alert(1);">і побачите, що сповіщення виконується - це може бути і більше шкідливий код.)
innerHTMLна textContent. Дякуємо за ваш коментар
DOMContentLoadedподію для цього.
The HTML5 fileReader дозволяє обробляти локальні файли, але їх ОБОВ'ЯЗКОВО обрати користувачеві, ви не можете вкоренитися на диску користувачів, який шукає файли.
В даний час я використовую це у розробних версіях Chrome (6.x). Я не знаю, які інші браузери це підтримують.
Тому що в мене немає життя, і я хочу, щоб ці 4 репутаційні моменти, щоб я міг проявити свою любов до людей, які насправді добре кодують, я поділився адаптацією коду Паоло Моретті . Просто використовуйте openFile(функцію для виконання зі вмістом файлу як перший параметр) .
function dispFile(contents) {
document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
// Thx user1601638 on Stack Overflow (6/6/2018 - /programming/13405129/javascript-create-and-save-file )
var eventMouse = document.createEvent("MouseEvents")
eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
elem.dispatchEvent(eventMouse)
}
function openFile(func) {
readFile = function(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
fileInput.func(contents)
document.body.removeChild(fileInput)
}
reader.readAsText(file)
}
fileInput = document.createElement("input")
fileInput.type='file'
fileInput.style.display='none'
fileInput.onchange=readFile
fileInput.func=func
document.body.appendChild(fileInput)
clickElem(fileInput)
}
Click the button then choose a file to see its contents displayed below.
<button onclick="openFile(dispFile)">Open a file</button>
<pre id="contents"></pre>
clickElem(), ви можете просто зателефонувати fileInput.click(). (принаймні, в останній версії Chrome)
Спробуйте
function readFile(file) {
return new Promise((resolve, reject) => {
let fr = new FileReader();
fr.onload = x=> resolve(fr.result);
fr.readAsText(file);
})}
але користувачеві потрібно вжити заходів, щоб вибрати файл
Метод запиту xmlhttp недійсний для файлів на локальному диску, оскільки безпека браузера не дозволяє нам це робити. Але ми можемо перекрити безпеку браузера, створивши ярлик-> клацніть правою кнопкою миші>> властивості в цільовому "... браузері location path.exe "append --allow-file-access-from-files. Це тестується на хромі, однак слід подбати про те, щоб усі вікна браузера були закриті і код запускався з браузера, відкритого за допомогою цього ярлика.
Javascript зазвичай не може отримати доступ до локальних файлів у нових браузерах, але об'єкт XMLHttpRequest може використовуватися для читання файлів. Таким чином, саме Ajax (а не Javascript) читає файл.
Якщо ви хочете прочитати файл abc.txt, ви можете записати код у вигляді:
var txt = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
txt = xmlhttp.responseText;
}
};
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();
Тепер txtміститься вміст файлу abc.txt.