2014-04-04 5 views
0

HTML5/JavaScript를 사용하여 텍스트 파일을 다운로드하고 내용을 표시 할 수 있습니까? 나는 그것을 메모리 위치에 저장하는 것을 선호하지만 임시 파일에 저장하는 것이 두 번째 옵션입니다.HTML5/Javascript를 사용하여 텍스트 파일을 다운로드하고 표시하는 방법은 무엇입니까?

- 업데이트 -

아래 내용을 참조하십시오. Atmos ObjectStore에서 파일을 가져 오는 AngularJS를 사용하여 지금까지 내가 얻은 것들이 있습니다. 파일 내용을 제시하는 방법이 나에게는 명확하지 않습니다. 클라이언트 측에서

var app = angular.module('MyTutorialApp',[]); 

app.controller("MainController", function($scope, $http) { 

    console.log("starting download"); 
    $scope.downloadedFile = null; 

    var config = {headers: { 
     'Accept': '*/*' 
    }}; 

    $http.get('https://some_path/theFile.txt?uid=myUUID&expires=1396648771&signature=mySignature', config) 
     .success(function(data) { 
      $scope.downloadedFile = data; 
      console.info(data); 
      console.log("finished download"); 
     }); 
}); 
+1

당신은 아마 AJAX 요청을 원하는을 . –

+0

백엔드에서 어떤 기술을 사용하고 있습니까? – Yoann

+0

Node.JS는 매우 유용한 도구입니다. github에서 프로젝트 "learnyounode"를 찾을 수 있으며 정확히 수행하는 Http 클라이언트 예제가 있습니다. 또한이 프로젝트에는 다른 재미있는 예제가 많습니다. – RichS

답변

1

당신이 할 수있는 HTML5 + 자바 스크립트와! 나는 this example했습니다 :

HTML 코드 :

<input id="myFile" type="file" value="Select a text file" /> 
<br /> 
<h3>Results:</h3> 
<div id="myContents"></div> 

자바 스크립트 코드 :

$("#myFile").on("change", function(e) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $("#myContents").html(this.result.replace(/\n/g, "<br />")); 
    }; 
    reader.readAsText(e.target.files[0]); 
}); 

편집 :

당신은 당신의 질문을 편집했습니다, 지금은 당신을보고 TXT 파일을 서버에서 가져오고 싶습니다. 글쎄, 난 Angular.JS를 사용하지 않지만, jQuery를, 그것은 같은 것 :

는 HTML :

<div id="myServerContents"></div> 

자바 스크립트/jQuery를 :

$.ajax({ 
    url: "myFile.txt", 
    data: {}, 
    async: false, 
    success: function (response) { 
     $("#myServerContents").html(response.replace(/\n/g, "<br />")); 
    }, 
    dataType: "text/plain" 
}); 
+0

오, 죄송합니다. 이제 질문을 편집 한 것을보고 서버 내부의 파일을 가져 가고 싶습니다. 따라서 AJAX 또는 웹 소켓을 사용하여 원하는 내용을 가져와야합니다. 또 다른 예제, 1 분 =을 만들 것입니다.) – Buzinas

+0

방금 ​​txt 파일에 대한 AJAX 요청을 포함하여 내 대답을 편집했으며이를 HTML에 저장하는 방법을 설명했습니다. – Buzinas

+0

감사합니다. .ajax 파일을 추가하면 파일이 다운로드되어 실행됩니다 (Content-Length : 27741). HTML 본문에 응답을 표시하는 방법이 명확하지 않습니다. "

"시도했지만 그 작동하지 않았다. – TERACytE

1

가져 오기 txt 파일 내용이 한 JQuery와 .get() 또는 .load()를 사용하는 것, 여러 가지 방법으로 수행 할 수 있습니다,하지만 난 당신이 JQuery와 사용하는 경우 확실하지 않다.

또 다른 간단한 옵션은 iframe을 사용하는 것입니다,이 예제를 가지고 :

<iframe src='http://yourSite.com/yourDir/logs/myTextFile.txt' /> 

JSFIDDLE DMEO

+0

고마워요 조 레이드. 파일을 다운로드했지만 파일을 저장하라는 메시지가 나타납니다. 프레임 내에 내용을 표시하려면 어떻게합니까? – TERACytE

+0

hmmm 이상적으로는 프레임 내에 txt 파일 내용 만 표시하면됩니다. – MJoraid

+0

@TERACytE 친절하게 내 답변 업데이트를 확인하고 데모를 추가했습니다. 테스트하고 txt 파일 내용을 볼 수 있는지 또는 다운로드하도록 승격되었는지 확인하십시오. Btw, 내가 angulerjs를 사용하는 것으로 나타났습니다, 옆에 JQuery를 사용하고 있습니까? – MJoraid

관련 문제