멀티업로드 게시판
본 스킨은 개인적으로 사용하기 위해서 제작된것이며, 크롬에서만 테스트 진행을 했던 스킨입니다.
1월 11일 낮에 스킨 올렸다가 익스에서 작동이 안된다는 댓글을 보고 확인을 해보니 모든 기능이 먹통임을 확인하고 업로드한 스킨을 삭제하고 수정작업을 시작 했습니다.
(낮에 다운받은 분들에게는 죄송합니다....)
확인을 해보니 find() 메소드가 익스에서는 사용되지 않는 것이였습니다.
참고사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find
위 주소로 접속하여 해결하였습니다.
멀티업로드 데모페이지 : http://www.suu.kr/bbs/board.php?bo_table=notice
익스11, 크롬, 파이어폭스 이렇게 3개의 브라우저에만 테스트를 했기 때문에 다른 브라우저에서 작동여부는 보장할 수 없습니다.
멀티업로드 게시판.
1. 그누보드 BASIC 스킨에 멀티업로드 기능만 추가하였습니다.
2. HTML5를 지원하지 않는 브라우저에서는 기존 업로드방식을 사용합니다.
(HTML5를 지원하지 않는 브라우저에서 테스트는 못했습니다.)
3. 파일을 선택후 업로드 대기열에서 파일의 위치를 마우스 드래그를 하여 순서를 변경할 수 있으며 변경한 순서대로 출력됩니다.
4. 파일업로드와 썸네일 생성은 그누보드 시스템과 동일합니다.
5. 파일 업로드 진행상태를 볼 수 있는 프로그레스바가 추가되었습니다.
6. 이미지뷰어는 "lightbox 2.0"을 사용합니다.
page : https://lokeshdhakar.com/projects/lightbox2/
7. 업로드 대기열에서 이미지순서변경은 jquery 1.21.1 버전의 "sortable"을 사용합니다.
page : https://jqueryui.com/sortable/#display-grid
8. 관리자는 게시판리스트 화면에서 파일 업로드 제한 설정을 할 수 있도록 하였습니다.
(게시판 리스트 화면에서 "설정" 버튼 클릭)
9. 1회 전송 가능 파일 수, 1회 전송 가능 사이즈, 단일 파일 전송 사이즈, 업로드 완료된 파일 포함 총 업로드 가능 파일 수
총 4가지 항목에 대해 설정을 할 수 있으며, 서버설정값 이하로만 변경할 수 있습니다.
설정 페이지에서 서버에서 설정된 값을 확인할 수 있습니다.
10. 데모페이지에서 적용되었던 원본이미지 강제 리사이즈 기능은 삭제하였습니다. (데모페이지에서도 삭제)
11. 게시판 글쓰기 이후 업데이트는 XMLHttpRequest를 사용되며, 오류가 없을 경우 모든 업로드파일 처리 이후 리스트화면으로 이동합니다.
12. 글쓰기페이지에서 "파일찾기"후 업로드할 파일을 선택하면 "./multi/_function.js"파일 "handleImgFileSelect"함수가 실행된 이후 업로드대기상태가 됩니다.
13. 업로드대기영역에는 이미지파일 선택시 썸네일을 보여주고, 일반파일 선택시 확장자와 파일이름으로 표시됩니다.
14. 업로드대기영역에서 파일을 제외하는 방법은 해당 이미지위에 "X"를 클릭하여 제거할 수 있습니다.
15. "./skin/board"가 아닌 "./theme/themename/skin/board"에 등록시 파일을 열어 경로를 수정해야 합니다.
- 이미지업로드 대기열에서 순서 변경할때 오류시..
1. head.php 파일중 "container"에 "position:relative;"가 정의 되어 있으면 파일업로드 대기열에서 이미지 이동시 제대로 작동되지 않습니다.
마우스로 이미지를 드래그시 이미지가 마우스 위치보다 높이 올라가는 현상이 발생됩니다.
데모페이지에서는 "position:relative;"를 삭제하였으며, 아직까지 큰 문제는 발생되지 않았습니다.
"position:relative;"는 ./css/style.css 파일 #cintainer 에 있습니다.(179라인쯤 위치)
모바일 크롬에서는 멀티업로드가 가능하며, 네이버에서는 다중파일선택이 안되더군요.
네이버나 다른 모바일 브라우저에서도 이미지 다중선택이 가능하도록 방법을 찾고 있습니다.
혹시 방법을 아시는분은 살짝 귀뜸해 주시면 감사하겠습니다.