브라우저에서 로컬 텍스트 파일을 읽는 방법
파일의 경로를 받아들여 텍스트의 각 행을 문자 배열로 변환하는 함수를 만들어 단순한 텍스트 파일 리더를 구현하려고 합니다만, 동작하지 않습니다.
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에서는 동작하지 않고, 계속 Exception 101이 표시됩니다.Firefox뿐만 아니라 다른 브라우저(특히 Chrome)에서도 작동하려면 어떻게 해야 합니까?
0을 ('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");
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(청구인):
이 기술은 파이어폭스에서는 잘 작동하지만 크롬의 기술처럼 보입니다.
fetch에서는, 「」를 서포트하고 않습니다.file:///URL （ Chrome 68 ） 。
Update-2(청구인):
이 기술은 Chrome과 동일한 보안상의 이유로 Firefox 68 이상 버전(Jul 9, 2019)에서는 작동하지 않습니다.
CORS request not HTTPhttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp 를 참조해 주세요.
Javascripture에 접속하여 readAs 섹션으로 이동합니다.문자를 보내고 예를 들어보십시오.readAs가 어떻게 되어 있는지 알 수 있습니다.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>
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>최신 솔루션:
fileOrBlob.text()음음음같 뭇매하다
<input type="file" onchange="this.files[0].text().then(t => console.log(t))">
사용자가 해당 입력을 통해 텍스트 파일을 업로드하면 콘솔에 기록됩니다.여기 작업 중인 jsbin 데모가 있습니다.
다음은 좀 더 자세한 버전입니다.
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await file.text();
console.log(text);
}
</script>
현재(2020년 1월) Chrome과 Firefox에서만 사용할 수 있습니다.향후 이 내용을 읽으시려면 https://developer.mozilla.org/en-US/docs/Web/API/Blob/text에서 호환성을 확인하시기 바랍니다.
오래된 브라우저에서는 다음과 같이 동작합니다.
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await (new Response(file)).text();
console.log(text);
}
</script>
관련:2020년 9월부터 사용자가 선택한 파일에 대한 영구 읽기 액세스(및 쓰기 액세스)를 원하는 경우 Chrome 및 Edge에서 사용할 수 있는 새로운 Native File System API가 제공됩니다.
, 참조)을 수 읽을 수는 을 html을 .JS는 파일 또는 파일 목록을 Html로 전달합니다(FileReader()).사용자는 파일 또는 파일 목록을 HTML로 스크립트에 전달해야 합니다.<input type="file">.
그런 다음 JS를 사용하여 파일 또는 파일 목록, 속성 및 파일 또는 파일 내용을 처리할 수 있습니다(예시 보기).
보안상의 이유로 JS가 할 수 없는 것은 (사용자 입력 없이) 컴퓨터의 파일 시스템에 자동으로 액세스하는 것입니다.
JS가 로컬 fs에 자동으로 액세스할 수 있도록 하려면 JS가 포함된 html 파일이 아니라 hta 문서를 작성해야 합니다.
hta 파일에는 JS 또는 VBS를 포함할 수 있습니다.
그러나 hta 실행 파일은 Windows 시스템에서만 작동합니다.
이것은 표준 브라우저 동작입니다.
Google Chrome도 fs API에서 동작했습니다.자세한 내용은 이쪽 http://www.html5rocks.com/en/tutorials/file/filesystem/
가져오기 및 비동기 기능 사용
const logFileText = async file => {
const response = await fetch(file)
const text = await response.text()
console.log(text)
}
logFileText('file.txt')
다음 두 가지 함수를 만들어 보십시오.
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]);
}
이미 시도하고 있는 경우 다음과 같이 "false"를 입력합니다.
rawFile.open("GET", file, false);
기타 예 - 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();
같은 발신기지 정책으로 인해 Chrome의 로컬 AJAX 콜은 지원되지 않습니다.
Chrome의 오류 메시지는 다음과 같습니다. "Cross origin requests for protocol scheme: http, data, chrome, chrome-extension, https."
즉, chrome은 http/https 프로토콜을 사용하여 도메인에서 제공하는 파일을 유지하기 위해 모든 도메인에 대해 가상 디스크를 생성합니다.이 가상 디스크 외부의 파일에 대한 액세스는 동일한 오리진 정책에 따라 제한됩니다.AJAX 요청 및 응답은 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
- 에서 파일
를 사용한 로그
및 Firefox - Google Chrome © Mozilla Firefox
내 경우 다음과 같은 파일 구조를 가지고 있습니다.
result : console.log 과: :
사용자에게 파일 선택을 요구할 경우 파일 내용을 읽습니다.
// read the contents of a file input
const readInputFile = (inputElement, callback) => {
const reader = new FileReader();
reader.onload = () => {
callback(reader.result)
};
reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
const openFile = (callback) => {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = () => {readInputFile(el, (data) => {
callback(data)
document.body.removeChild(el);
})}
el.click();
}
사용방법:
// prompt the user to select a file and read it
openFile(data => {
console.log(data)
})
<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>
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.filename 파일:
var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});
dynamic unixTime queryString은 캐시를 방지합니다.
AJ는 웹 http://에서 작동합니다.
로컬 파일을 읽는 방법
이를 사용하여 파일을 loadText()로 로드하면 JS는 readText() 함수를 추출한 후 파일을 읽고 로드될 때까지 비동기적으로 대기합니다.이것에 의해, 통상의 JS 로직(에러가 발생했을 경우에 loadText() 함수에 try catch block을 쓸 수도 있습니다)을 계속할 수 있습니다만, 이 예에서는 최소로 유지합니다.l.
async function loadText(url) {
text = await fetch(url);
//awaits for text.text() prop
//and then sends it to readText()
readText(await text.text());
}
function readText(text){
//here you can continue with your JS normal logic
console.log(text);
}
loadText('test.txt');
이 함수는 브라우저 및 열린 파일 선택 대화 상자 및 사용자 선택 후 파일을 이진 및 읽기 데이터와 함께 콜백 함수로 읽습니다.
function pickAndReadFile(callback) {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = function (){
const reader = new FileReader();
reader.onload = function () {
callback(reader.result);
document.body.removeChild(el);
};
reader.readAsBinaryString(el.files[0]);
}
el.click();
}
그리고 이렇게 사용하세요.
pickAndReadFile(data => {
console.log(data)
})
내 라이브러리를 가져올 수 있습니다.
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>그러면 함수는fetchfile(path)업로드된 파일이 반환됩니다.
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>주의: HTML 코드가 로컬인 경우 Google Chrome에서 오류가 발생하지만 HTML 코드와 파일을 온라인으로 저장한 후 온라인 HTML 파일을 실행하면 작동합니다.
로컬 파일 텍스트를 읽으려면JavaScript크롬을 사용하면 크롬 브라우저는 인수로 실행됩니다.--allow-file-access-from-filesJavaScript가 로컬파일에 액세스 할 수 있도록 하려면 , 다음의 방법으로 읽을 수 있습니다.XmlHttpRequest다음과 같습니다.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var allText = xmlhttp.responseText;
}
};
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
알아요, 이 파티에 늦었단 말이에요.내가 가진 걸 보여줄게.
텍스트 파일의 간단한 읽기입니다.
var path = "C:\\path\\filename.txt"
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
if (err) throw err;
console.log('OK: ' + filename);
console.log(data)
});
이게 도움이 됐으면 좋겠어요.
언급URL : https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file-in-the-browser
'programing' 카테고리의 다른 글
| QTCreator에서 사용하기 위해 설치된 mariadb10과 RPI3(Stretch)를 교차 컴파일하려면 어떻게 해야 합니까? (0) | 2022.12.10 |
|---|---|
| MySQL에서 "Every derived table must airas"라는 오류는 무엇입니까? (0) | 2022.12.10 |
| 역순으로 정렬된 키를 사용하여 개체 반복 (0) | 2022.12.10 |
| POM.xml 환경변수는 어떻게 참조합니까? (0) | 2022.12.10 |
| 현재 날짜를 datetime 형식으로 mySQ 삽입l (0) | 2022.12.10 |