The World of Web

시작하기 클라이언트에서 ajax를 이용한 다중 이미지 업로드하는 방법입니다. 서버쪽 node.js에서 이미지 업로드 글을 보시면 연동이 되도록 구성을 하였습니다. 참고해주세요^^ 소스코드 우선 body 태그 안에 아래 소스코드를 입력해주세요. 보통 form 태그안에 type이 submit인 input 태그를 이용하는데 저는 Jquery로 해당 부분을 처리하겠습니다. 다음 script 부분입니다. $(document).on('click', '#files_send', function () { var formData = new FormData(); for(var i=0; i

시작하기 이번에는 express 4.x 를 이용한 업로드 이미지 저장하기입니다. javascript로 업로드 요청하기는 다음 포스팅을 참조해주세요~^^ 소스코드우선 'multer'로 모듈을 설치해주세요. 설치방법은 커맨드 창에서 npm install multer 명령어로 직접 설치하는 방법과 package.json을 이용한 설치가 있습니다. 설치가 끝나셨다면 아래와 같이 multer 미들웨어를 추가해주세요. var multer = require('multer'); var upload = multer({ dest: './uploadFolder' }); 여기서 dest는 업로드 파일을 저장할 폴더를 지정하는 거구요. 저 소스코드를 입력한다면 폴더가 없더라도 생성을 직접 해준답니다. 추가가 끝나셨으면 아래 함..

시작하기 li 태그를 쓰다보시면, 1. 글씨 왼쪽에 표시된 부분을 변경하시고 싶거나 2. 오른쪽으로 툭 튀어 나와버린 부분을 왼쪽으로 들여쓰고 싶은 경우가 있으실 겁니다. 방법은 간단합니다. 아래 소스코드를 봐주세요^^ 소스코드 1. 표시된 부분 수정하기 스타일 변경 첫 번째 두 번째 세 번째 보시다시피 위에 ul에서 list-style 속성을 변경시켜 주시면 됩니다. 속성의 종류는 http://www.w3schools.com/cssref/pr_list-style-type.asp에 들어가시면 모두 확인 하실 수 있습니다. 2. 들여쓰기 스타일 변경 첫 번째 두 번째 세 번째 들여쓰기는 더욱 간단한데요 ul 태그 안에 padding-left 값을 변경시켜 li 태그의 위치를 변경시킬 수 있습니다. 결과 1..

시작하기 웹 프로그래밍을 하다보면 첨부한 이미지를 표시하여 보여줘야할 때가 있습니다. 이미 많은 방법들이 인터넷에 있지만 제가 찾아보고 직접 해 본 소스코드 중 제일 이해하기 좋고 간편한 방법으로 작성했습니다. 소스코드 우선, 아래와 같이 태그와 스타일 속성을 설정해주세요. 스타일 속성은 원하시는 대로 변경하셔도 무방합니다. 다음은 script 부분의 코드입니다. 결과 자! 이제 테스트를 해보시면 아래와 같은 결과가 나옵니다 ^^ 출처 : http://www.html5rocks.com/en/tutorials/file/dndfiles/이미지 파일 첨부에 대한 좀 더 다양한 정보를 얻으실 수 있습니다.혹시 이해가 가지 않는 부분은 댓글 남겨주세요.