이노릭스 블로그 :: InnoPU - 멀티 업로드 기본 스타일

멀티 업로드 기본 스타일 style_basic.html 화면 입니다.

1. InnoPU 로드하기

InnoPU를 로드하기 위하여 여러가지 정보를 설정 합니다.

1) InnoPU_AP.js	: 파일이 있는 경로를 설정 합니다.
2) InnoPU.js	: 파일이 있는 경로를 설정 합니다.
3) action.php	: 폼정보와 사진 파일을 업로드 받아 저장하는 파일의 경로를 설정 합니다.
4) test_f	: 사진파일과 함께 전송되는 폼네임을 설정 합니다.
5) image_file	: 전송되는 사진 파일의 변수명을 설정 합니다.
6) array	: 변수명 전달 형태를 설정 합니다.
"array"로 설정시 변수명을 image_file[] image_file[] image_file[]... 와 같은 배열 형태로 전달

2. 사진 파일과 함께 전송할 Form 정보

예제에는 test_f 라는 폼네임에 임의로 만든 key, sessionid, userid 3개를 사진과 함께 전송 합니다.

3. 컨트롤 출력 크기 설정

InnoPU 컴포넌트가 웹 페이지에서 출력되는 크기를 픽셀 단위로 설정 합니다.

InnoAPInit(ip_TotalUploadSize, ip_UnitUploadSize, ip_MaxFileCount, 0, '가로크기', '세로크기');

입력 기본 단위는 픽셀이며 ..., 0,"100%","100%"); 와 같이 입력하시면, 가로, 세로 100%로 지정 됩니다.

4. 찾기창 확장자 설정

찾아보기 창에서 출력할 이미지 파일의 확장자를 설정 합니다.

document.InnoAP.AppendFilter("사진 파일", "*.jpg; *.jpeg; *.gif; *.png; *.bmp;"); // 찾아보기 창의 확장자 필터

5. 미리보기 여부 및 설정

이 옵션은 InnoPU.js 파일에서 설정하실 수 있습니다.
"true"로 설정하면 선택된 이미지를 썸네일로 출력하고 "false"로 설정시 사진의 파일명이 출력 됩니다.

// 새창에서 하단 선택 목록에 썸네일 사용여부
var ip_UseThumbnailList = "true";

// 새창에서 하단 선택 목록에 사용할 썸네일 크기
var ip_ShowCartThumbnailWidth = 86;
var ip_ShowCartThumbnailHeight = 65;

1) ip_UseThumbnailList = "true"