JavaScript를 사용하여 서버에서 텍스트 파일을 읽는 방법
서버에 텍스트 파일이 있습니다.클라이언트의 JavaScript를 사용하여 이 파일을 읽고 처리할 수 있도록 하고 싶습니다.서버의 파일 형식을 변경할 수 없습니다.
파일 내용을 JavaScript 변수로 가져오려면 어떻게 해야 하나요?파일의 사이즈는 최대 3.5 MB이지만, 예를 들어 100 행(1 행은 50 ~100 문자)의 청크로 간단하게 처리할 수 있습니다.
사용자는 파일의 내용을 볼 수 없습니다.파일 내의 데이터 처리 결과를 볼 수 있습니다.
숨김 프레임을 사용하여 파일을 거기에 로드하고 내용을 해석할 수 있습니다.
HTML:
<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe>
JavaScript:
<script type="text/javascript">
function LoadFile() {
var oFrame = document.getElementById("frmFile");
var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
while (strRawContents.indexOf("\r") >= 0)
strRawContents = strRawContents.replace("\r", "");
var arrLines = strRawContents.split("\n");
alert("File " + oFrame.src + " has " + arrLines.length + " lines");
for (var i = 0; i < arrLines.length; i++) {
var curLine = arrLines[i];
alert("Line #" + (i + 1) + " is: '" + curLine + "'");
}
}
</script>
주의: Chrome 브라우저에서 이 기능을 사용하려면 --allow-file-access-from-files 플래그로 시작해야 합니다.credit.
이 거대한 데이터 덩어리를 로드하는 것은 좋은 계획은 아니지만, 필요하다면 jQuery의 함수를 사용하여 로드하는 방법에 대한 개요를 다음에 나타냅니다.
<html><head>
<script src="jquery.js"></script>
<script>
getTxt = function (){
$.ajax({
url:'text.txt',
success: function (data){
//parse your data here
//you can split into lines using data.split('\n')
//an use regex functions to effectively parse it
}
});
}
</script>
</head><body>
<button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button>
</body></html>
Ajax를 사용해야 합니다.Ajax는 기본적으로 서버에 요청을 보낸 후 JavaScript 개체로 변환하는 JSON 개체를 가져옵니다.
체크해 주세요.
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
jQuery 라이브러리를 사용하는 경우 다음과 같은 작업이 더욱 쉬워집니다.
http://api.jquery.com/jQuery.ajax/
이 말을 한 이상 3.5 파일은 다운로드하지 않는 것이 좋습니다.MB에서 JS로!그것은 좋은 생각이 아니다.서버에서 처리한 후 데이터를 반환하십시오.그런 다음 새 데이터를 가져오려면 새 Ajax 요청을 보내고 서버에서 요청을 처리한 다음 새 데이터를 반환합니다.
도움이 됐으면 좋겠다.
나는 AJAX를 사용하자는 Rafid의 제안을 이용했다.
이 방법은 효과가 있었습니다.
var url = "http://www.example.com/file.json";
var jsonFile = new XMLHttpRequest();
jsonFile.open("GET",url,true);
jsonFile.send();
jsonFile.onreadystatechange = function() {
if (jsonFile.readyState== 4 && jsonFile.status == 200) {
document.getElementById("id-of-element").innerHTML = jsonFile.responseText;
}
}
저는 기본적으로 (거의 문자 그대로) http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get2에서 이 코드를 복사했습니다.따라서 모든 것을 그들에게 인정해 줍니다.
작동 원리에 대해서는 잘 모르지만 브레이크 작동 원리에 대해서는 알 필요가 없습니다.
이게 도움이 됐으면 좋겠네요!
★★★★★★★★★★★★★★★★★★.XMLHttpRequest는 Fetch API로 대체되었습니다.Google은 고객이 원하는 것을 수행하는 예를 포함한 좋은 소개를 공개했습니다.
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
하지만, 아마 당신은 전화하기를 원할 것입니다.response.text()대신response.json().
요점만 말씀드리면 innerhtml을 사용한 답변이 몇 개 있습니다.저는 비슷한 아이디어를 가지고 장난을 쳤지만, 결정도 하지 않았습니다.최신 버전 리액트 버전에서는, 같은 프로세스를 「위험하게 innerhtml」라고 부르고 있습니다.앱에서 html을 표시함으로써 클라이언트에 OS로의 길을 제공하고 있습니다.이로 인해 다양한 공격과 SQL 주입 시도가 발생할 수 있습니다.
상태 0을 확인해야 합니다(XMLHttpRequest를 사용하여 로컬로 파일을 로드하면 상태가 표시되지 않고 웹 서버에서 상태가 반환됩니다).
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);
}
디바이스 파일을 재읽는 경우는, 다음을 사용합니다.
readTextFile("file:///C:/your/path/to/file.txt");
서버에서 파일을 읽는 경우:
readTextFile("http://test/file.txt");
난 정말 네가 이 일을 잘못 하고 있다고 생각해.+3Mb 텍스트 파일을 다운로드하고 구문 분석하려고 하는 것은 완전히 미친 짓입니다.서버 측의 파일을 해석하여 결과를 데이터베이스에 저장하고(선택한 대로 SQL이 좋지만 CouchDB와 같은 콘텐츠 키 값 데이터가 더 잘 작동하는지 여부에 따라 다름) 클라이언트 측의 데이터를 해석하는 데 Ajax를 사용하는 것이 좋습니다.
또한 가능하면 텍스트 파일을 완전히 건너뛰어 성능을 향상시키는 것이 좋습니다.
언급URL : https://stackoverflow.com/questions/4533018/how-to-read-a-text-file-from-server-using-javascript
'source' 카테고리의 다른 글
| 후크를 사용하여 어레이에서 객체 삭제(useState) (0) | 2023.04.01 |
|---|---|
| JSON.parse('1234')가 1234를 반환하는 이유는 무엇입니까? (0) | 2023.04.01 |
| 숍 페이지만을 대상으로 합니다. (0) | 2023.04.01 |
| 쿼리 캐시를 사용하지 않고 Spring Data JPA 쿼리 방식의 결과를 캐시하려면 어떻게 해야 합니까? (0) | 2023.04.01 |
| ui-sref와 $state.go의 각도 차이JS UI 라우터 (0) | 2023.03.27 |