<div style="text-align:center;"><font size="5"><b>코드와 실행화면 보여드리고 질문하겠습니다.</b></font></div><font size="5"><b> </b></font><div><b><font size="5"><b><br></b></font></b></div><b>1. 서버 app.js</b> <div><br></div> <div> <div>var express = require('express');</div> <div>var app = express();</div> <div><br></div> <div>var multer = require('multer');</div> <div>var storage = multer.diskStorage({</div> <div> destination: function(req, file, cb){</div> <div> cb(null, 'uploads/');</div> <div> },</div> <div> filename: function(req, file, cb){</div> <div> cb(null, file.originalname);</div> <div> }</div> <div>});</div> <div>var upload = multer({storage : storage});</div> <div><br></div> <div>app.listen(3000, function(){</div> <div> console.log("Connected 3000 port!!");</div> <div>});</div> <div><br></div> <div>app.use(express.static('client'));</div> <div><br></div> <div>app.post('/Graph_UI.html', upload.single('JsonFile'), function(req, res){</div> <div> res.send('<script type="text/javascript">alert("completed!!");</script>');</div> <div>});</div> <div><br></div> <div>app.get('/', function(req, res){</div> <div><br></div> <div>});</div></div> <div><br></div> <div><br></div> <div><br></div> <div><font size="5"><b>2. 클라이언트 Graph_UI.html</b></font></div> <div><br></div> <div> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a target="_blank" href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>"></div> <div><html></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><head></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><meta http-equiv="Content-type" content="text/html; charset=UTF-8"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><title>Graph UI</title></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><style type="text/css"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>body</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>{</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>margin: 0px;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>}</div> <div><br></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>#box</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>{</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>position: relative;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>height: auto;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>margin: auto;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>}</div> <div><br></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>#left</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>{</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>position: relative;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>width: 20%;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>float: left;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>}</div> <div><br></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>#right</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>{</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>position: relative;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>width: 80%;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>float: left;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>}</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></style></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></head></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><body></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><script src="<a target="_blank" href="http://code.jquery.com/jquery-latest.min.js">http://code.jquery.com/jquery-latest.min.js</a>"></script></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><script src="Updater.js"></script> <!-- 파일 불러오기 --></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><script src="ReadJson.js"></script><span class="Apple-tab-span" style="white-space:pre;"> </span><!-- JSON 데이터 불러오기 --></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div id="box"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div id="left"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><p></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><input type="hidden" id="FileName"></input></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><form action="Graph_UI.html" method="post" enctype="multipart/form-data"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><input type="file" value="파일 선택" name="JsonFile" id="File_Reader"></input></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><input type="submit" onclick="ReadJson();"></input></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></form></div> <div><br></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></p></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><p></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><form name="form1"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><select size=50 id="Sentences" style="width:90%; height:70%" onclick="Updater(this.value);"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></select></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></form></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></p></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><div id="right"></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span><br>그래프 자리</br></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></div></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span></body></div> <div></html></div></div> <div><br></div> <div><br></div> <div><br></div> <div><br></div> <div><font size="5"><b>3. JSON 파일 불러와서 select 목록에 추가 ReadJson.js</b></font></div> <div><br></div> <div> <div>function ReadJson()</div> <div>{</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>var URL, headidx, endidx, senText, filename;</div> <div><br></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>URL = document.getElementById("File_Reader").value;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>headidx = URL.lastIndexOf('\\');</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>endidx = URL.length;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>filename = URL.substring(headidx+1, endidx);</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>document.getElementById("FileName").value = filename;</div> <div><br></div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>$.ajax({</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>crossOrigin: true,</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>type: "GET",</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>url: "127.0.0.1:3000/uploads/"+filename,</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>datatype: "JSON",</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>dataType: "jsonp",</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>success : function(data){</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>$(data.sentence).each(function(index, value){</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>console.log(value.text);</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>var datas = value.text;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>var selector = document.getElementById("Sentences");</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>var op = document.createElement("option");</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>op.text = datas;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>op.value = filename + "." + value.id;</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>selector.options.add(op);</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>console.log(op);</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>});</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>}</div> <div><span class="Apple-tab-span" style="white-space:pre;"> </span>});</div> <div>};</div></div> <div><br></div> <div><br></div> <div><br></div> <div><br></div> <div><br></div> <div><font size="5"><b>4. 실행화면</b></font></div> <div> <div style="text-align:left;"><br></div> <div style="text-align:left;">(그림 아래 설명)</div> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201608/14717808915495e9939f934cd79ca618d5b49effda__mn97746__w1920__h1030__f35778__Ym201608.png" width="800" height="429" alt="실행화면.PNG" class="chimg_photo" style="border:none;" filesize="35778"></div> <div style="text-align:center;"><span style="line-height:1.5;"><font size="2"><b>하고자 하는 것은 여기서 파일선택을 하여 A.json파일을 불러옵니다.</b></font></span></div></div> <div style="text-align:center;"><font size="2"><b>제출을 누르면 서버에 그 파일이 올라가고 곧바로 서버에 저장된 A.json파일을 불러와서 왼쪽 select칸에 목록을 추가하는겁니다.</b></font></div> <div><br></div> <div><br></div> <div><br></div> <div><font size="5"><b>5. 업로드 성공 화면</b></font></div> <div><br></div> <div> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201608/14717810216740e0bede6e4e5384cce16246760e5a__mn97746__w1920__h1080__f56047__Ym201608.png" width="800" height="450" alt="업로드성공.png" class="chimg_photo" style="border:none;" filesize="56047"></div> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201608/1471781027ad4039d3648849ff804287a97789281e__mn97746__w933__h779__f62087__Ym201608.png" width="800" height="668" alt="저장폴더.PNG" class="chimg_photo" style="border:none;" filesize="62087"></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><b><font size="5">6. 참고용 Workspace 폴더</font></b></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201608/14717811268f3fac7a19e94283813c90c91ff74333__mn97746__w933__h779__f78610__Ym201608.png" width="800" height="668" alt="Workspace.PNG" class="chimg_photo" style="border:none;" filesize="78610"></div><br></div> <div style="text-align:center;"><b>Client에 Graph_UI.html과 ReadJson.js 문서가 들어있습니다.</b></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><font size="5"><b>7. 질문</b></font></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">1. 업로드 완료 후 뜨는 alert 메시지창에서 확인을 누르면 빈화면으로 넘어갑니다. 저기서 확인을 누르면 뒤에 보이는 페이지 그대로 유지하는 방법은 없을까요??</div></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">2. 제출을 누르면 파일은 업로드가 되지만 파일을 다시 읽어와서 왼쪽 select창에 목록을 추가하지 않습니다. 아래 사진은 서버 없이 크롬을 파일을 직접 불러올수 있는 보안을 약화시킨 거로 켜서 성공한 결과입니다. 아래와 같이 목록이 추가되어야 하는데 같은 코드를 사용해도 되지 않는것을 보아 서버에서 파일을 읽어오지 못하는거 같습니다. 제출버튼 옆에 업데이트 버튼을 새로 만들어서 목록을 업데이트하도록 해보았지만 그래도 추가는 되지 않았습니다. 어떻게 해야 서버에서 JSON파일을 읽어올까요? 크로스도메인문제도 jsonp를 사용해서 오류가 뜨지 않게 했습니다.</div> <div style="text-align:left;"> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201608/1471781663eaf540f0a9e04d02bc4486b964fcdf8e__mn97746__w1545__h686__f59446__Ym201608.png" width="800" height="355" alt="그래프 캡처.PNG" class="chimg_photo" style="border:none;" filesize="59446"></div><br></div>
댓글 분란 또는 분쟁 때문에 전체 댓글이 블라인드 처리되었습니다.