node.js 서버에 JSON파일을 올리고 그 파일을 가져와서 사용

오유인페이지

개인차단 상태

지빵님의
개인페이지입니다

가입 : 10-12-21

방문 : 2004회

닉네임변경 이력

일반게시판
베스트게시판
베스트오브베스트
댓글목록

회원차단

회원차단해제

게시물ID : programmer_18220

작성자 : 빵미인아

추천 : 0

IP : 222.113.***.140

댓글 : 4개

등록시간 : 2016/08/21 21:16:54

http://todayhumor.com/?programmer_18220

모바일

node.js 서버에 JSON파일을 올리고 그 파일을 가져와서 사용

옵션

본인삭제금지

<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></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>

이 게시물을 추천한 분들의 목록입니다.

푸르딩딩:추천수 3이상 댓글은 배경색이 바뀝니다.
(단,비공감수가 추천수의 1/3 초과시 해당없음)

죄송합니다. 댓글 작성은 회원만 가능합니다.

번호

제 목

이름

날짜

조회

분류	게시판
베스트	베스트오브베스트 베스트 오늘의베스트
유머	유머자료 유머글
이야기	자유 고민 연애 결혼생활 좋은글 자랑 공포 멘붕 사이다 꿈 똥 군대 밀리터리 미스터리 술한잔 오늘있잖아요 투표인증 새해
이슈	시사 시사아카이브 사회면 사건사고
생활	패션 패션착샷 아동패션착샷 뷰티 인테리어 DIY 요리 커피&차 육아 법률 동물 책 지식 취업정보 식물 다이어트 의료 영어 맛집 추천사이트 해외직구
취미	사진 사진강좌 카메라 만화 애니메이션 포니 자전거 자동차 여행 바이크 민물낚시 바다낚시 장난감 그림판
학술	경제 역사 예술 과학 철학 심리학
방송연예	연예 음악 음악찾기 악기 음향기기 영화 다큐멘터리 국내드라마 해외드라마 예능 팟케스트
방송프로그램	무한도전 더지니어스 개그콘서트 런닝맨 나가수
디지털	컴퓨터 프로그래머 IT 안티바이러스 애플 안드로이드 스마트폰 윈도우폰 심비안
스포츠	스포츠 축구 야구 농구 바둑
야구팀	삼성 두산 NC 넥센 한화 SK 기아 롯데 LG KT 메이저리그 일본프로야구리그
게임1	플래시게임 게임토론방 엑스박스 플레이스테이션 닌텐도 모바일게임
게임2	던전앤파이터 롤 마비노기 마비노기영웅전 하스스톤 히어로즈오브더스톰 gta5 디아블로 디아블로2 피파온라인2 피파온라인3 워크래프트 월드오브워크래프트 밀리언아서 월드오브탱크 블레이드앤소울 검은사막 스타크래프트 스타크래프트2 베틀필드3 마인크래프트 데이즈 문명 서든어택 테라 아이온 심시티5 프리스타일풋볼 스페셜포스 사이퍼즈 도타2 메이플스토리1 메이플스토리2 오버워치 오버워치그룹모집 포켓몬고 파이널판타지14 배틀그라운드
기타	종교 단어장 자료창고
운영	공지사항 오유운영 게시판신청 보류
임시게시판	메르스 세월호 원전사고 2016리오올림픽 2018평창올림픽 코로나19 2020도쿄올림픽