게시판 스킨 사진첨부하기(jquery, ajax)(아미나,나리야)
게시판 사진첨부
jquery, ajax 이용한 파일업로드 입니다.
판매용이 아니고 개인적으로 불편한 걸 해결하고자
만들었는데... 아마 저와 비슷한 분들이 있을거라 생각해서 공유해봅니다.
다른 분이 좀 더 깔끔한 소스와 디자인으로 업그레이드 해주시면 감사하겠습니다.
나리야, 아미나빌더에
게시판 파일첨부기능 jquery-file-upload 플러그인이 추가 되었으면 하는 바램입니다.
# 개발목적
1. 사진첨부시 한 개씩 선택하는 게 귀찮음
2. 기존 사진첨부 레이아웃때문에 깔끔한 레이아웃 디자인이 힘듬
기존에 동영상(대용량파일) 업로드 & 인코딩용으로 만들어 사용하던 것을
이번에 사진첨부전용으로 게시판스킨에 적용하게 되었습니다.
예전부터 게시판 연계한 파일업로드 커스터마이징하는 것이 까다롭더라구요.
파일첨부때문에 고생을 좀 많이 했는데...
jquery-file-upload를 쓰면서 정말 편해지더군요.
# 설치요건
- 아미나 빌더
- 나리야 빌더
※ 아미나빌더(테스트 안해봄)
- 아미나에서는 bootstrap 버전이 낮아져서 레이아웃이 깨질수 있음
- jquery-ui 버전을 바꿔줘야 할 듯(나리야 빌더는 jquery(3.5.1) - jquery-ui(1.12.1)이 맞음)
# 테스트(아미나, 나리야)
- 맥:크롬(OK)
- 아이폰: 크롬(OK)
- 윈도우: 크롬(OK), Edge(OK)
- 안드로이드폰: 크롬(OK)
- 개인적 사용기능이라서 저의 작업환경에서 테스트완료되서 공유합니다.
- 많은 기기에서 테스트 한게 아니라서 어떤 환경에서는 에러가 날 수 있습니다.
# 사용한 플러그인
1. https://github.com/blueimp/jQuery-File-Upload // 너무나도 유명한 플러그인, 현재 그누보드 smarteditor 사진업로드에서도 사용중인 플러그인
2. jquery-ui.js // 드래그 정렬(sortable)
3. smarteditor2의 파일첨부 레이아웃 커스터마이징
# 기능
1. 이미지파일만 업로드 가능(커스터마이징하면 얼마든지 다른 파일도 업로드 가능)
2. 사진첨부 drag&drop 및 사진선택 창열기 지원(여러장 선택)
3. 드래그 순서정렬하기(bf_no)
# 설치방법
1. /plugin/폴더에 "jqupload"폴더 통째로 업로드
2. write_update.tail.skin.php, delete.skin.php 파일을 적용할 게시판 스킨폴더에 업로드
3. 게시판스킨/write.skin.php 파일수정
- 파일첨부부분 코드를 삭제후 아래 코드로 대체
<?php include(G5_PLUGIN_PATH."/jqupload/in_file_upload.php"); ?>