멀티업로드 게시판 > 그누보드5 스킨

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

멀티업로드 게시판 정보

게시판 멀티업로드 게시판

첨부파일

첨부파일 20190409_basic_multi.zip (65.2K) 207회 다운로드 2019-04-09 17:16:37

본문

2000880543_1547167107.7047.png

 

 

 

 

 

본 스킨은 개인적으로 사용하기 위해서 제작된것이며, 크롬에서만 테스트 진행을 했던 스킨입니다.

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=multy_upload

 

익스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라인쯤 위치)

 

 

 

모바일 크롬에서는 멀티업로드가 가능하며, 네이버에서는 다중파일선택이 안되더군요.
네이버나 다른 모바일 브라우저에서도 이미지 다중선택이 가능하도록 방법을 찾고 있습니다.
혹시 방법을 아시는분은 살짝 귀뜸해 주시면 감사하겠습니다.

 

 

궁금한 사항은 댓글로 남겨주시면 답변드릴게요!~~~
 

추천29
스폰서링크

댓글 전체

아주 좋네요 ^^ 컨텐츠에도 4만원인가?? 팔던데 ..궁금한게
크롬 모바일에서는 파일선택 input box 로 20개 나오던데...
원래 모바일에서는 안되는건가요???

이게 다른 멀티업로드 게시판도 보니 크롬에서는 다중선택이 되는데 네이버 같은앱에서는 하나씩만되던데
api제공을 안해서 그런가요???
이 스킨은 대용량 파일 전송에 대해서는 보장할 수 없습니다.
컨텐츠몰에 있는건 대부분 1G 이상의 대용량 파일을 업로드 지원할겁니다.
PC용으로만 제작된것이라 모바일에 대응하여 제작된건 아닙니다.

하지만, 모바일에서도 다중업로드 기능을 사용할 수 있습니다.
모바일에서 20개로 나온다는거 게시판 환경설정에서 모바일스킨이 모바일용으로 선택되었기 때문에 그럴겁니다.

모바일에서도 테스트 하시려면  접속상태를 "PC버전으로 보기"변경해서 하면됩니다.
그럼, 휴대폰에서도 PC용 화면으로 볼 수 있습니다.

모바일 크롬에서는 다중선택 및 업로드가 정상적으로 가능합니다.
네이버앱에서 파일 다중선택하는 것에 대해서 아직 방법을 찾지 못했습니다. ㅎ
감사히 잘 쓰고있습니다 ^^

그런데 문제가 하나 있는데 제가 해결해보려해도 해결할 수가 없네요 ㅠㅠ
게시판-글 수정하기 로 들어가면
첨부파일들이 보이는데, 첨부파일 오른쪽에 "삭제" 버튼을 누르면,
가장 아래에 있는 파일(마지막 index)도 같이 삭제됩니다... 소스를 찾아봐도 답을 찾을수없어 도움을 구합니다..
답변감사드립니다.. 제가 알림을 늦게 확인했네요 ㅠ
게시글에 링크올려두신 아래 사이트에서도 같은 현상이 일어납니다.
http://www.suu.kr/bbs/board.php?bo_table=multy_upload

글을 처음 작성할때는 이상이 없는데, 수정할때 위와 같은 현상이 일어납니다.
확인부탁드립니다
글수정시 이미지 삭제를 하면 대상이미지만 삭제가 됩니다.
이미지를 삭제하면 이미지정보를 다시 읽어 오면서 한칸씩 당겨지게 됩니다.
그리고, 삭제시 img의 index정보로 하는게 아니고 "pic_Del"함수를 사용하여 이미지를 삭제하기 때문에 대상이 아닌 이미지가 삭제될 현상은 없습니다.

글 수정시, 이미지는 추가, 삭제 잘 됩니다.
그런데 아래 사진처럼, 글수정시 첨부파일을 삭제할때에 위와 같은 문제가 생겨서요..

다시 확인해보니 언급한 내용이 맞더군요.
이미지 클릭시 첨부파일의 내용도 삭제가 되더군요.
(실제 업로드된 파일은 삭제되지 않은 걸로 확인되었습니다.)

원인은 배열생성시 "bf_no"의 값이 잘못 정의되어 발생되는 문제였습니다.

아래의 파일만 수정하시거나 교체해주시면 됩니다.
변경파일 : 스킨폴더/multy/_car_file_json.php

또는, "_car_file_json.php"파일을 열어 아래의 코드로 전체 변경해주시면 됩니다.

<?php
include_once('./_common.php');
$bo_table = $_POST['bo_table'];
$wr_id	= $_POST['wr_id'];
if(!$bo_table || !$wr_id) { die(); }
$data = Array();
$sql = "select
			*
		from
			{$g5['board_file_table']}
		where
			bo_table = '{$bo_table}' and
			wr_id = '{$wr_id}' and
			bf_type = 0
		order by
			bf_no ";
$result = sql_query($sql);
while ($row = sql_fetch_array($result))
{
	$data[] = Array(
		"no"		=> $row['bf_no'],
		"source"	=> addslashes($row['bf_source']),
		"image_type"=> $row['bf_type'],
		"size"		=> get_filesize($row['bf_filesize']),
		"download"	=> $row['bf_download'],
		"content"	=> get_text($row['bf_content']),
		"datetime"	=> $row['bf_datetime'],
		"dlink"		=> "<span class='dlink' onclick=\"pic_Del('{$wr_id}', '{$row['bf_no']}', '1');\">삭제</span>"
	);
}

$data = ($data==null)? "":$data;
echo json_encode($data);
exit;
?>


알려 주셔서 감사합니다.
정말 감사드립니다 : )
며칠을 붙잡고있어도 해결 못했었는데, 덕분에 많이 배우고 알아갑니다.

더 열심히 공부해야겠습니다. 감사합니다^^

그런데 이번에는 view.skin에서 첨부파일 리스트가 다 보이지 않습니다 ㅠㅠ
이부분은 제가 찾아서 해결해보겠습니다
안녕하세요. 좋은 자료감사합니다.
테마에서 멀티게시판을 쓰려고 하는데 . 글을 보니 경로를 수정하라고 되어 있는데 어떤파일에 있는 경로를 수정해야 하는지요? 감사합니다.
좋은 자료 공유해주셧서 감사합니다.

한가지문의 드려요.

1차 업로드시에 중복 파일명이 있을경우 반영이 안되는데 처리방법이 있을까요?
© SIRSOFT