자바스크립트로 로컬 text파일을 읽어 수 있나요?
본문
자바스크립트 페이지 스크립트 실행후
파일선택 버튼없이
페이지 로딩 시 바로 읽을 수 있는지요,
파일은 c: 드리이브에 sample.txt입니다.
답변 4
위 링크 페이지 중에서
Yes JS can read local files (see FileReader()) but not ,"automatically": the user has to pass the file or a list of files to the script with an html <input type="file">.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 파일을 읽기 위한 FileReader 객체 생성
var reader = new FileReader();
// 파일이 로드될 때 실행되는 이벤트 핸들러
reader.onload = function(event) {
var contents = event.target.result;
// 파일 내용을 사용하여 원하는 작업 수행
$("#result").text(contents);
};
// 파일을 읽어오기 위한 함수
function readTextFile(file) {
reader.readAsText(file);
}
// 페이지 로딩 시에 실행될 함수
function onPageLoad() {
// 웹 서버에 호스팅된 파일의 URL 설정
var fileURL = "https://sample.com/sample/sample.txt";
// 파일을 가져오기 위한 XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
xhr.open("GET", fileURL, true);
xhr.responseType = "blob";
// 파일이 로드될 때 실행되는 이벤트 핸들러
xhr.onload = function() {
if (xhr.status === 200) {
// 파일이 성공적으로 가져와진 경우
var fileBlob = xhr.response;
readTextFile(fileBlob);
}
};
// 파일 가져오기 요청 보내기
xhr.send();
}
// 페이지 로딩 시에 onPageLoad 함수 호출
onPageLoad();
});
</script>
<div id="result"></div>
JS로 로컬파일을 불러오는것은 보안취약성으로 하여 지금 거의 모든 브라우저에서 지원하지 않습니다.
혹, 불러올수 있다면 InternetExplorer 에서 ActiveX Control 기능을 사용하는것입니다.
var fso = new ActiveXObject("Scripting.FileSystemObject");
// Open the file for output.
var filename = "c:\\testfile.txt";
var f = fso.OpenTextFile(filename, ForWriting, true);
이것은 보안레벨을 낮추어야 IE에서 작동합니다.
IE10부터는
var reader = new FileReader();
reader.onloadend = function(){
// do something with this.result
}
reader.readAsText(readFile);
와 같은 FileReader()를 사용할수 있습니다. 상세한 내용은 다음 링크에서 찾아봐주세요.
http://msdn.microsoft.com/en-us/library/ie/hh772310%28v=vs.85%29.aspx
도움의 되길!!!
감사합니다. 답변 주셔서..
결론은 모두 안된다는 것입니다.
결국 pc 파일은 그냥 브라우저에서 읽는 것이 아니라, 그냥 편집툴이나 보기 툴에서 그냥 보면 되는 것 같습니다.
로컬 pc에 html로 순수하게 자바스트립트 없이 작성해서 보면 되는 것 같습니다.ㅇ
위 질문 적고 코드 만들어줘 .했더니..
var reader = new FileReader();
reader.onload = function() {
var contents = this.result;
alert(contents);
};
reader.readAsText("C:\\drive\\sample.txt");
ChatGPT 경우
<!DOCTYPE html>
<html>
<head>
<title>파일 자동 읽기 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 파일을 읽기 위한 FileReader 객체 생성
var reader = new FileReader();
// 파일이 로드될 때 실행되는 이벤트 핸들러
reader.onload = function(event) {
var contents = event.target.result;
// 파일 내용을 사용하여 원하는 작업 수행
console.log(contents);
};
// 파일을 읽어오기 위한 함수
function readTextFile(file) {
reader.readAsText(file);
}
// 페이지 로딩 시에 실행될 함수
function onPageLoad() {
// sample.txt 파일의 경로 설정
var fileURL = "file:///C:/sample.txt";
// 파일을 가져오기 위한 XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
xhr.open("GET", fileURL, true);
xhr.responseType = "blob";
// 파일이 로드될 때 실행되는 이벤트 핸들러
xhr.onload = function() {
if (xhr.status === 200) {
// 파일이 성공적으로 가져와진 경우
var fileBlob = xhr.response;
readTextFile(fileBlob);
}
};
// 파일 가져오기 요청 보내기
xhr.send();
}
// 페이지 로딩 시에 onPageLoad 함수 호출
onPageLoad();
});
</script>
</head>
<body>
<!-- 페이지 내용 -->
</body>
</html>
잘 되는지는 테스트 안해봤어요.
감사^
