728x90 반응형 전체 글51 [jQuery] 파일 첨부 시 미리보기, 파일 확장자명 판별하기 html 코드를 사용하여 파일을 첨부할 때 보통 input type = "file"를 사용하여 파일을 첨부합니다.이때 파일만 첨부되고 어떤 파일이 첨부 되었는지 알 수가 없습니다.이미지 미리보기가 된다면 어떤 파일을 첨부했는지 쉽게 알 수 있을 것입니다. 이번 글은 첨부한 이미지파일을 미리 볼 수 있는 미리 보기 기능에 대해 작성해 보겠습니다. 작업할 내용 아래 파일 선택을 눌러서 파일을 첨부하면 위쪽에 미리 보기로 첨부한 이미지가 올라가게 됩니다.첨부한 파일명은 파일 선택 바로 옆에 표기되게 되고,오른쪽의 첨부하기 버튼을 누르면 파일을 저장하게 됩니다. 이미지 미리 보기 코드 가끔 페이지를 공격하여 정보를 빼내가려는 사람들은 파일 첨부기능에 자신들의 코드가 작성된 파일을 첨부하기도 합니다.. 2023. 2. 14. [jQuery] confirm 확인과 취소, div 값 변경 자바스크립트에서 alert를 사용하여 경고창을 띄울 수 있습니다.하지만 alert는 사용자에게 메시지를 전달하는 기능일 뿐 사용자가 true와 false를 선택할 수 없습니다.이 글에서는 true와 false를 선택할 수 있는 confirm 함수에 대해서 살펴보도록 하겠습니다. confirm 이란? confirm 함수는 alert 함수와 비슷하게 경고창을 띄워주는 함수입니다. 예를 들어,로그인할 때 "비밀번호가 틀렸습니다!" 같은 메시지는 alert로 보내주면 됩니다. 하지만 글을 작성할 때 "저장하시겠습니까?" 같은 메시지는 alert로 보내줄 경우,예, 아니요를 선택 할 수 없기 때문에 alert로 메시지를 보내주면 안 되고 confirm을 통해 true와 false를 판별해 주어야 합니다. .. 2023. 2. 13. [HTML/PHP] 간단한 게시판 만들기 #5 (상세페이지/수정/삭제) 간단한 게시판 만들기 5번째 글입니다.이제 작성된 게시판의 상세페이지와 글의 수정 및 삭제 기능을 추가해 보겠습니다.작성된 글을 확인할 수 있는 페이지, 그리고 본인이 작성한 글은 수정할 수 있는 기능이 들어있어야 게시판일 것입니다. CSS 수정 게시판의 상세페이지에서 삭제 버튼을 추가할 생각이라 기존에 게시판 목록에 있던 삭제버튼은 제거하여 주고,글쓰기 버튼을 아래쪽으로 내렸습니다. 살짝 어두운 느낌으로 가는 게 더 좋아 보여서 색상도 조금 변경해 주었습니다. 게시판 상세 페이지 이제 게시판 상세 페이지를 만들어 보겠습니다. test_page.phpfetch($res)) { ?> '> .. 2023. 2. 9. [HTML/PHP] 간단한 게시판 만들기 #4 (글쓰기) 간단한 게시판 만들기 4번째 글입니다.이전 글에 이어서 이번에는 게시판에 글 등록과, 글 삭제 기능을 추가해 보겠습니다.게시판에 글을 등록하고 등록한 글도 삭제하는 기능은 게시판 기능 중 핵심이라고 할 수 있습니다. HTML페이지 작업 먼저 HTML페이지에서 form과 자바스크립트 처리를 해주겠습니다.이전에 글쓰기와 삭제는 동작하지 않는 버튼만 미리 만들어 두었습니다.그 버튼을 눌렀을 때 등록과 삭제가 가능하도록 해주겠습니다. test_page.php 글쓰기 버튼에 클릭 시 write_page로 이동가능하게 onclick에 href를 넣어줍니다. 글쓰기 페이지 - 스타일 게시판의 글쓰기 페이지의 디자인을 티스토리와 비슷하게 만들어 보겠습니다. 스타일의 코드를 위와 같이 작성했습니다.티스토리를.. 2023. 2. 6. 이전 1 ··· 6 7 8 9 10 11 12 13 다음 728x90 반응형
