게시판 스킨 사진첨부하기(jquery, ajax)(아미나,나리야)

Amina Member PDS

아미나 테마, 스킨, 위젯 등 회원자료실

홈 > 회원포럼 > 회원자료실
회원자료실

게시판 스킨 사진첨부하기(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"); ?>



# 스크린샷(기본 스킨폼)

36336d6041ee8bb1f2dc1d23a7ab4fbd_1603620119_9585.png

36336d6041ee8bb1f2dc1d23a7ab4fbd_1603620120_0802.png

36336d6041ee8bb1f2dc1d23a7ab4fbd_1603620120_1671.png
 

# 스크린샷(수정한 폼)

36336d6041ee8bb1f2dc1d23a7ab4fbd_1603626269_3598.png

 

21 Comments
7 대청소 11.06 11:17  
스마트 에디터와는 상관이 없습니다.

이 플러그인이 불러오는 css,js 파일이 좀 있어서
다른 css,js와 충돌이 생길수 있습니다.

이건 좀 민감해서 제가 뭐라고 하긴 그렇네요.

url를 알려주시면 봐드릴 수 있는데... 장담은 할 수가 없습니다.

저도 css는 약해서...
2 카당 10.30 07:14  
정말 대박자료입니다
근데 적용하니 아래와 같은 오류가 납니다
이게 PHP 버전 때문일까요?
참고로 PHP7.4 사용중입니다

Parse error
: syntax error, unexpected end of file in
/home/ga/public_html/plugin/jqupload/in_file_upload.php
on line
234
5 이스보1 10.30 18:40  
사진이라는게 png, gif 등과 같은 파일들도 업로드가 되는건지요?
7 대청소 10.30 20:44  
기본 jp(e)g, png, gif 입니다.
그건 따로 확장자 설정하실 수 있습니다.
5 신의손 11.09 11:11  
와 진짜 능력자 ㄷㄷ
1 weo2ww 11.09 14:39  
저도 css 전부 깨져버리네요ㅠ

아미나빌더 쓰는중인데 어떻게 해야할까요
  1. 별도 라이센스 표기가 없는 경우 다운받으신 자료는 비영리 사이트에서만 사용가능하며, 제작의뢰 또는 납품용으로도 사용할 수 없습니다.
  2. 또한 몰에서 판매하는 자료의 리소스로 활용 또는 단독판매가 불가능하고, 회원자료실에서 재배포도 불가능합니다.
  3. 포인트가 있는 경우 다운로드 후 2개월(60일) 동안은 다시 받더라도 재차감되지 않습니다.
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand