ローカルテキストファイルを読むには？
ファイルのパスを受け取り、テキストの各行をchar配列に変換する関数を作成して、単純なテキストファイルリーダーを作成しようとしていますが、うまくいきません。
function readTextFile() {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "testing.txt", true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4) {
var allText = rawFile.responseText;
document.getElementById("textSection").innerHTML = allText;
}
}
rawFile.send();
}
ここで何がおかしいのですか？
これは、 前回のリビジョン からコードを少し変更した後ではまだうまくいかないようですが、今度はXMLHttpRequest例外101が発生します。
私はFirefoxでこれをテストしましたが、動作しますが、Google Chromeではそれが動作せず、例外101が表示され続けます。 ）？
あなたはステータス0をチェックする必要があります（XMLHttpRequestを使ってローカルにファイルをロードするとき、それはWebserverからではないのでステータスは返されません）
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
そしてあなたのファイル名にfile://を指定してください：
readTextFile("file:///C:/your/path/to/file.txt");
訪問 Javascripture ！そしてセクションに行きます readAsText そして例を試してみてください。あなたはどのように知ることができるでしょう readAsText の方程式 FileReader 動作します。
<html>
<head>
<script>
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
...
</div>
</body>
</html>
Javascriptで fetch api を導入した後は、ファイルの内容を読むのが簡単にはなりませんでした。
テキストファイルを読む
fetch('file.txt')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file
jsonファイルを読み込む
fetch('file.json')
.then(response => response.json())
.then(jsonResponse => console.log(jsonResponse))
// outputs a javascript object from the parsed json
更新日30/07/2018（免責事項）：
このテクニックは Firefox でうまく動作しますが、 Chrome の
fetchの実装はこの更新を書いた時点でのfile:///URLスキームをサポートしていません（Chrome 68でテスト済み）。
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>Jon Perryman、
はいjsはローカルファイルを読むことはできますが（FileReader（）を参照）自動的にはできません。ユーザはhtml <input type=file>を使ってスクリプトにファイルまたはファイルのリストを渡す必要があります。
それからjsでそれはファイルまたはファイルのリスト、それらのいくつかのプロパティとファイルまたはファイルの内容を処理すること（ビューの例）が可能です。
セキュリティ上の理由からjsができないことは、自分のコンピュータのファイルシステムに自動的に（ユーザーの入力なしで）アクセスすることです。
Jsがローカルのfsに自動的にアクセスできるようにするには、jsを含むhtmlファイルではなくhta文書を作成する必要があります。
Htaファイルは、その中にjsまたはvbsを含むことができます。
しかし、hta実行ファイルはWindowsシステムでのみ動作します。
これは標準的なブラウザの動作です。
グーグルクロムもfs apiで働いていました、ここでより多くの情報： http://www.html5rocks.com/en/tutorials/file/filesystem/ /
次のように "false"をタイプしてください。
rawFile.open("GET", file, false);
2つの関数を作成してみてください。
function getData(){ //this will read file and send information to other function
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var lines = xmlhttp.responseText; //*here we get all lines from text file*
intoArray(lines); *//here we call function with parameter "lines*"
}
}
xmlhttp.open("GET", "motsim1.txt", true);
xmlhttp.send();
}
function intoArray (lines) {
// splitting all text data into array "\n" is splitting data from each new line
//and saving each new line as each element*
var lineArr = lines.split('\n');
//just to check if it works output lineArr[index] as below
document.write(lineArr[2]);
document.write(lineArr[3]);
}
他の例 - FileReaderクラスを持つ私の読者
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<script>
function PreviewText() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadTextValue").value = oFREvent.target.result;
document.getElementById("obj").data = oFREvent.target.result;
};
};
jQuery(document).ready(function(){
$('#viewSource').click(function ()
{
var text = $('#uploadTextValue').val();
alert(text);
//here ajax
});
});
</script>
<object width="100%" height="400" data="" id="obj"></object>
<div>
<input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
<input id="uploadText" style="width:120px" type="file" size="10" onchange="PreviewText();" />
</div>
<a href="#" id="viewSource">Source file</a>
</body>
</html>
これは役に立つかもしれません、
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "sample.txt", true);
xmlhttp.send();
フェッチと非同期機能の使用
const logFileText = async file => {
const response = await fetch(file)
const text = await response.text()
console.log(text)
}
logFileText('file.txt')
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({`enter code here`
url: "TextFile.txt",
dataType: "text",
success: function (data) {
var text = $('#newCheckText').val();
var str = data;
var str_array = str.split('\n');
for (var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
// Add additional code here, such as:
alert(str_array[i]);
$('#checkboxes').append('<input type="checkbox" class="checkBoxClass" /> ' + str_array[i] + '<br />');
}
}
});
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
</script>
</head>
<body>
<div id="checkboxes">
<input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />
</div>
</body>
</html>
ChromeでのローカルAJAX呼び出しは、同一オリジンポリシーのためサポートされていません。
コンソールログをチェックすると、 "Cross Origin requests are not supported for protocol schemes: http, data, chrome, chrome-extension, https."が見つかります。
これは、Chromeがすべてのドメインに対して一種の仮想ディスクを作成し、上記のプロトコルを介してドメインによって提供されるファイルはこのディスクに保存され、ローカルディスク上の外部ファイルへのアクセスは同じOriginポリシーで制限されることを意味します。 AJAX要求と応答はhttp/httpsで発生するため、ローカルファイルでは動作しません。
Firefoxはそのような制限を設けていないので、あなたのコードはFirefox上でうまく動作するでしょう。しかしクロムのための回避策もあります： ここを見てください 。
上記のいくつかの答えに加えて、この修正された解決策は私のために働いた。
<input id="file-upload-input" type="file" class="form-control" accept="*" />
…….
let fileInput = document.getElementById('file-upload-input');
let files = fileInput.files;
//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);
…….
function readTextFile(filePath){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", filePath , true);
rawFile.send(null);
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200 || rawFile.status == 0){
var allText = rawFile.responseText;
console.log(allText);
}
}
}
}
function readTextFile(file) {
var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
rawFile.open("GET", file, false); // open with method GET the file with the link file , false (synchronous)
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
{
if(rawFile.status === 200) // status 200: "OK"
{
var allText = rawFile.responseText; // Returns the response data as a string
console.log(allText); // display text on the console
}
}
}
rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}
readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path
- JavaScriptからファイルテキストを読み込む
- javascriptを使用したファイルからのコンソールログテキスト
- グーグルクロムとモジラのFirefox
私の場合、私はこのファイル構造を持っています： 
console.logの結果：
私のライブラリをインポートすることができます：
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/[email protected]"></script>それから、関数fetchfile(path)はアップロードされたファイルを返します
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>注意：Google Chromeでは、HTMLコードがローカルの場合、エラーが表示されますが、HTMLコードとファイルをオンラインで保存してからオンラインのHTMLファイルを実行すると機能します。
ローカルファイルのデータをjs（data.js）ロードで取得します。
function loadMyFile(){
console.log("ut:"+unixTimeSec());
loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
var mA_=mSdata.split("\n");
console.log(mA_.length);
}
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
return Math.round( (new Date()).getTime()/1000);
}
data.jsのファイルは、
var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});
動的unixTime queryStringはキャッシュされないようにします。
AJはWeb http：//で動作します。
Chromeを使用してJavaScriptを介してローカルファイルのテキストを読むには、Chromeブラウザが引数--allow-file-access-from-filesを付けて実行され、JavaScriptがローカルファイルにアクセスできるようにしてから、XmlHttpRequestを使って読むことができます。
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var allText = xmlhttp.responseText;
}
};
xmlhttp.open("GET", file, false);
xmlhttp.send(null);