코드와 실행화면 보여드리고 질문하겠습니다.
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
<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="Updater.js"></script> <!-- 파일 불러오기 -->
<script src="ReadJson.js"></script> <!-- JSON 데이터 불러오기 -->
<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>
<form name="form1">
<select size=50 id="Sentences" style="width:90%; height:70%" onclick="Updater(this.value);">
</select>
</form>
</p>
</div>
<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. 실행화면
(그림 아래 설명)
하고자 하는 것은 여기서 파일선택을 하여 A.json파일을 불러옵니다.
제출을 누르면 서버에 그 파일이 올라가고 곧바로 서버에 저장된 A.json파일을 불러와서 왼쪽 select칸에 목록을 추가하는겁니다.
5. 업로드 성공 화면
6. 참고용 Workspace 폴더
Client에 Graph_UI.html과 ReadJson.js 문서가 들어있습니다.
7. 질문
1. 업로드 완료 후 뜨는 alert 메시지창에서 확인을 누르면 빈화면으로 넘어갑니다. 저기서 확인을 누르면 뒤에 보이는 페이지 그대로 유지하는 방법은 없을까요??
2. 제출을 누르면 파일은 업로드가 되지만 파일을 다시 읽어와서 왼쪽 select창에 목록을 추가하지 않습니다. 아래 사진은 서버 없이 크롬을 파일을 직접 불러올수 있는 보안을 약화시킨 거로 켜서 성공한 결과입니다. 아래와 같이 목록이 추가되어야 하는데 같은 코드를 사용해도 되지 않는것을 보아 서버에서 파일을 읽어오지 못하는거 같습니다. 제출버튼 옆에 업데이트 버튼을 새로 만들어서 목록을 업데이트하도록 해보았지만 그래도 추가는 되지 않았습니다. 어떻게 해야 서버에서 JSON파일을 읽어올까요? 크로스도메인문제도 jsonp를 사용해서 오류가 뜨지 않게 했습니다.
글쓰기