2008/07/24 14:00

InnoPU - 싱글 업로드 HTML 스타일

2008/07/24 14:00 in 사진전용 업로드 PU/응용하기

싱글 업로드 HTML 스타일 style_single.html 화면 입니다.



1. InnoPU 로드하기

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

<script type="text/javascript" language="JavaScript" src="InnoPU_AP.js"></script>
<script type="text/javascript" language="JavaScript" src="InnoPU.js"></script>

ip_ActionFilePath = "action.php";
ip_SendForm = "test_f";
ip_InputName = "image_file";
ip_InputType = "array";


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. 찾기창 확장자, Drop 영역 ID 설정

찾아보기 창에서 출력할 이미지 파일의 확장자를 설정 합니다.
마우스로 Drag&Drop 받을 수 있는 영역의 ID(pu_drop)를 설정 합니다.

document.InnoAP.AppendFilter("사진 파일", "*.jpg; *.jpeg; *.gif; *.png; *.bmp;"); // 찾아보기 창의 확장자 필터
document.InnoAP.AppendDragDrop("pu_drop"); // 드롭영역 태그의 ID 값


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

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

<form name="test_f">
<input type="hidden" name="key1" value="val1">
<input type="hidden" name="sessionid" value="0236672757">
<input type="hidden" name="userid" value="innorix">
</form>


4. 선택된 사진 정보 출력

사진을 선택하는 버튼, 드래그 받는 영역과 선택된 사진의 파일명, 미리보기 영역 등을 설정 합니다.
<input type="text" size="25" id="pu_file" readonly>
<input type="button" onClick="document.InnoAP.OpenFile()" value="찾아보기..." class="input_button">
<input type="button" onClick="RemoveImageLoader('')" value="삭제" class="input_button">
<input type="button" onClick="StartUpload()" value="업로드" class="input_button">
<div id="pu_exif" class="exif"> </div>
<div id="pu_drop" style="width:480px; border:1px solid #737373">
<script language="JavaScript">
LoadMultiImageLoader('pu_preview', 가로, 세로, '기본 이미지 경로', 가로, 세로);
</script>
</div>

1) pu_file는 선택된 사진의 전체 경로를 출력 합니다.
2) pu_exif는 선택된 사진의 촬영정보(Exif)가 있을 경우 출력 합니다.
3) pu_drop는 사진을 Drag&Drop 받을 수 있는 영역이 설정 됩니다.
4) pu_preview는 사진의 미리보기 출력 영역이 설정 됩니다.
    미리보기 영역에 출력될 이미지의 가로와 세로 최대 크기를 픽셀 단위로 설정하고
    미리보기 이미지가 없을 경우에도 항상 출력되는 기본 이미지 경로와 가로와 세로 크기를 설정 합니다.

<script for="InnoAP" event="OnAddFile(strFilePath, intFileSize);">
<!--
document.getElementById("pu_file").value = strFilePath;
document.getElementById("pu_exif").innerHTML = '촬영정보 : ' + GetExifArray(strFilePath).join('  |  ');
document.getElementById("pu_preview").ShowImage(strFilePath, 가로, 세로);
//-->
</script>

5) 1,2,4번에서 설정한 pu_file, pu_exif, pu_preview ID명을 설정 합니다.
    미리보기 영역에 출력될 이미지의 가로와 세로 최대 크기를 픽셀 단위로 동일하게 설정 합니다.

"응용하기" 카테고리의 다른 글

2008/07/24 14:00 2008/07/24 14:00
Posted by 이노릭스
받은 트랙백이 없고 댓글이 없습니다.

Trackback : 이 글에는 트랙백을 보낼 수 없습니다

prev Prev 1 ... 57 58 59 60 61 62 63 64 65 ... 78 Next next