728x90 반응형 자바스크립트11 [자바스크립트/jquery] 파일 첨부 시 미리보기, 파일 확장자명 판별하기 서론 html 코드를 사용하여 파일을 첨부할때 보통 input type = "file"를 사용하여 파일을 첨부합니다. 이때 파일만 첨부되고 어떤 파일이 첨부 되었는지 알수가 없습니다. 이미지 미리보기가 된다면 어떤파일을 첨부 했는지 쉽게 알 수 있겠죠. 이번 글은 첨부한 이미지파일을 미리볼 수 있는 미리보기 기능에 대해 작성해보겠습니다. 본문 작업할 내용 아래 파일 선택을 눌러서 파일을 첨부하면 위쪽에 미리보기로 첨부한 이미지가 올라가게 됩니다. 오른쪽의 첨부하기 버튼을 누르면 파일을 저장하게 됩니다. 이미지 미리보기 코드 이미지 파일이 아닌 다른 확장자의 파일을 넣으면 경고창을 띄우게 됩니다. 파일을 첨부했을때 $("#form_file").on("change", function(e) 를 통해서 파일이 .. 2023. 2. 14. [자바스크립트/Jquery] confirm 확인과 취소, div 값 변경 서문 자바스크립트에서 alert를 사용하여 경고창을 띄울 수 있습니다. 하지만 alert는 사용자에게 메시지를 전달하는 기능일 뿐 사용자가 true와 false를 선택할 수 없습니다. 이 글에서는 true와 false를 선택할 수 있는 confirm 함수에 대해서 살펴보도록 하겠습니다. 본문 로그인할 때 "비밀번호가 틀렸습니다!" 같은 메시지는 alert로 보내주면 됩니다. 하지만 글을 작성할 때 "저장하시겠습니까?" 같은 메시지는 alert로 보내줄 경우 예, 아니오 선택을 할 수 없기 때문에 alert로 메시지를 보내주면 안 되고 confirm을 통해 true와 false를 판별해 주어야 합니다. 위의 이미지를 통해 alert와 confirm의 차이점을 쉽게 볼 수 있습니다. 정보를 알려줄 때는 al.. 2023. 2. 13. [HTML/PHP] html과 php, mysql을 활용한 간단한 게시판 만들기 #5 (상세페이지/수정/삭제) 서론 이전 포스팅에서 게시판 글 작성까지 완료를 했습니다. 이제 작성된 게시판의 상세페이지와 글의 수정 및 삭제 기능을 추가해 보겠습니다. CSS 수정 게시판의 상세페이지에서 삭제 버튼을 추가할 생각이라 기존에 게시판 목록에 있던 삭제버튼은 제거하여 주고, 글쓰기 버튼을 아래쪽으로 내렸습니다. 살짝 어두운 느낌으로 가는 게 더 좋아 보여서 색상도 조금 변경해 주었습니다. 게시판 상세 페이지 이제 게시판 상세 페이지를 만들어 보겠습니다. test_page.php 먼저 게시판 목록에서 상세페이지로 넘어가기 위해서 목록에서 게시판 제목을 눌렀을 때 상세페이지로 이동하도록 a태그를 사용하여 주고 mode를 view로 idx값과 함께 상세페이지로 값을 넘겨줍니다. write_page.php 2023. 2. 9. [HTML/PHP] html과 php, mysql을 활용한 간단한 게시판 만들기 #3 (검색기능) 서론 게시판 만들기 3번째 글입니다. 이전 포스팅 참조해 주세요. 이어서 게시판 검색 기능을 추가해 보겠습니다. HTML 서치바 틀 만들기 먼저 검색할 텍스트를 입력할 서치바를 만들어 줍니다. css는 나중에 맘에 드는 형식으로 수정해 보겠습니다. 일단은 네모 박스를 만들어줍니다. Jongs 게시판 2023. 1. 31. 이전 1 2 3 다음 728x90 반응형
