回答:
使用例は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
FileReader、displayContents上記に対するコメントinnerHTMLです。信頼できないコンテンツでこのように設定すると、セキュリティ上の脆弱性になる可能性があることに注意してください。（これを自分で確認するには、bad.txt次のようなコンテナを作成<img src="/nonexistent" onerror="alert(1);">し、アラートが実行されることを確認します。より悪質なコードである可能性があります。）
innerHTMLましたtextContent。コメントありがとうございます。
DOMContentLoadedそのためのイベントも使用できます。
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。これはChromeでテストされていますが、すべてのブラウザーウィンドウを閉じ、このショートカットで開いたブラウザーからコードを実行する必要があります。
JavaScriptは通常、新しいブラウザのローカルファイルにアクセスできませんが、XMLHttpRequestオブジェクトを使用してファイルを読み取ることができます。したがって、実際にファイルを読み取っているのは、JavaScriptではなくAjaxです。
ファイルを読みたい場合は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ファイルの内容が含まれます。