게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
node.js 서버에 JSON파일을 올리고 그 파일을 가져와서 사용
게시물ID : programmer_18220짧은주소 복사하기
작성자 : 빵미인아
추천 : 0
조회수 : 1541회
댓글수 : 4개
등록시간 : 2016/08/21 21:16:54
옵션
  • 본인삭제금지
코드와 실행화면 보여드리고 질문하겠습니다.

1. 서버 app.js

var express = require('express');
var app = express();

var multer = require('multer');
var storage = multer.diskStorage({
  destination: function(req, file, cb){
    cb(null, 'uploads/');
  },
  filename: function(req, file, cb){
    cb(null, file.originalname);
  }
});
var upload = multer({storage : storage});

app.listen(3000, function(){
  console.log("Connected 3000 port!!");
});

app.use(express.static('client'));

app.post('/Graph_UI.html', upload.single('JsonFile'), function(req, res){
  res.send('<script type="text/javascript">alert("completed!!");</script>');
});

app.get('/', function(req, res){

});



2. 클라이언트 Graph_UI.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Graph UI</title>
<style type="text/css">
body
{
margin: 0px;
}

#box
{
position: relative;
height: auto;
margin: auto;
}

#left
{
position: relative;
width: 20%;
float: left;
}

#right
{
position: relative;
width: 80%;
float: left;
}
</style>
</head>
<body>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="Updater.js"></script> <!-- 파일 불러오기 -->
<script src="ReadJson.js"></script> <!-- JSON 데이터 불러오기 -->
<div id="box">
<div id="left">
<p>
<input type="hidden" id="FileName"></input>
<form action="Graph_UI.html" method="post" enctype="multipart/form-data">
<input type="file" value="파일 선택" name="JsonFile" id="File_Reader"></input>
<input type="submit" onclick="ReadJson();"></input>
</form>

</p>
<p>
<form name="form1">
<select size=50 id="Sentences" style="width:90%; height:70%" onclick="Updater(this.value);">
</select>
</form>
</p>
</div>
<div id="right">
<br>그래프 자리</br>
</div>
</div>
</body>
</html>




3. JSON 파일 불러와서 select 목록에 추가 ReadJson.js

function ReadJson()
{
var URL, headidx, endidx, senText, filename;

URL = document.getElementById("File_Reader").value;
headidx = URL.lastIndexOf('\\');
endidx = URL.length;
filename = URL.substring(headidx+1, endidx);
document.getElementById("FileName").value = filename;

$.ajax({
crossOrigin: true,
type: "GET",
url: "127.0.0.1:3000/uploads/"+filename,
datatype: "JSON",
dataType: "jsonp",
success : function(data){
$(data.sentence).each(function(index, value){
console.log(value.text);
var datas = value.text;
var selector = document.getElementById("Sentences");
var op = document.createElement("option");
op.text = datas;
op.value = filename + "." + value.id;
selector.options.add(op);
console.log(op);
});
}
});
};





4. 실행화면

(그림 아래 설명)
실행화면.PNG
하고자 하는 것은 여기서 파일선택을 하여 A.json파일을 불러옵니다.
제출을 누르면 서버에 그 파일이 올라가고 곧바로 서버에 저장된 A.json파일을 불러와서 왼쪽 select칸에 목록을 추가하는겁니다.



5. 업로드 성공 화면

업로드성공.png
저장폴더.PNG



6. 참고용 Workspace 폴더

Workspace.PNG

Client에 Graph_UI.html과 ReadJson.js 문서가 들어있습니다.



7. 질문

1. 업로드 완료 후 뜨는 alert 메시지창에서 확인을 누르면 빈화면으로 넘어갑니다. 저기서 확인을 누르면 뒤에 보이는 페이지 그대로 유지하는 방법은 없을까요??

2. 제출을 누르면 파일은 업로드가 되지만 파일을 다시 읽어와서 왼쪽 select창에 목록을 추가하지 않습니다. 아래 사진은 서버 없이 크롬을 파일을 직접 불러올수 있는 보안을 약화시킨 거로 켜서 성공한 결과입니다. 아래와 같이 목록이 추가되어야 하는데 같은 코드를 사용해도 되지 않는것을 보아 서버에서 파일을 읽어오지 못하는거 같습니다. 제출버튼 옆에 업데이트 버튼을 새로 만들어서 목록을 업데이트하도록 해보았지만 그래도 추가는 되지 않았습니다. 어떻게 해야 서버에서 JSON파일을 읽어올까요? 크로스도메인문제도 jsonp를 사용해서 오류가 뜨지 않게 했습니다.
그래프 캡처.PNG

전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호