jQuery 파일 업로드 플러그인 Uploadify 사용 가이드_jquery

Flash를 지원하지 않는 Apple 휴대폰의 Safari 브라우저를 피하기 위해 HTML5 버전은 모바일 브라우저를 더 잘 지원합니다.
주요 기능: 다중 파일 업로드 지원, HTML5 버전의 드래그 앤 드롭 업로드, 실시간 업로드 진행률 표시줄 표시, 파일 크기, 파일 유형, 버튼 이미지 정의, 업로드 파일 스크립트 등과 같은 강력한 매개변수
사용자 정의 기능

Flash 버전 사용 방법:
1. JS 및 CSS 로드

코드 복사 코드는 다음과 같습니다.

<script src="jquery/1.7 .1/ jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript">< ;/script> ;
<link rel="stylesheet" type="text/css" href="uploadify.css">

2. HTML 콘텐츠 작성

코드 복사 코드는 다음과 같습니다.

<form>
< div id= "queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>

3. 함수 호출

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript ">
$(document).ready(function()
        'script' : 'UploadHandler.php',                                                
</script>

4. 매개변수 구성에 대한 자세한 설명

uploader: uploadify.swf 파일의 상대 경로입니다. swf 파일을 클릭하면
파일 열기 대화 상자가 희미해집니다. 기본값: uploadify.swf.
스크립트: 백그라운드 핸들러의 상대 경로입니다. 기본값: uploadify.php
checkScript: 업로드된 선택된 파일이 서버에 존재하는지 확인하는 데 사용되는 백그라운드 처리 프로그램의 상대 경로
fileDataName: 이름을 설정하고, 업로드된 파일은 이 이름을 기반으로 검색됩니다. 서버 처리 프로그램 데이터에서. 기본값은 Filedata입니다.
method: 제출 방법 Post 또는 Get 기본값은 Post입니다.
scriptAccess: 플래시 스크립트 파일의 액세스 모드, 로컬 테스트를 위해 항상으로 설정된 경우 기본값: sameDomain
folder: 업로드된 파일이 있는 디렉터리 저장되었습니다.
queueID: 파일 큐의 ID로, 파일 큐를 저장하는 div의 ID와 일치합니다.
queueSizeLimit: 여러 파일 생성을 허용하는 경우 선택한 파일 수를 설정합니다. 기본값: 999.
multi: true로 설정하면 여러 파일을 업로드할 수 있습니다.
auto: true로 설정하면 파일 선택 후 바로 업로드됩니다. false로 설정하면 업로드 버튼을 눌러야 업로드됩니다.
fileDesc: 이 속성 값은 유효하기 전에 fileExt 속성으로 설정되어야 합니다. 이는 파일 선택 대화 상자에서 프롬프트 텍스트를 설정하는 데 사용됩니다. 예를 들어
fileDesc를 "rar doc pdf를 선택하십시오."로 설정합니다. file"
fileExt: 설정 선택할 수 있는 파일 형식, 형식은 '*.doc;*.pdf;*.rar'입니다.
sizeLimit: 업로드된 파일의 크기 제한입니다.
simUploadLimit: 허용되는 동시 업로드 수 기본값: 1.
buttonText: 찾아보기 버튼의 텍스트, 기본값: BROWSE.
buttonImg: 버튼 이미지를 탐색하는 경로입니다.
hideButton: 찾아보기 버튼의 이미지를 숨기려면 true로 설정합니다.
롤오버: 값은 true와 false입니다. true로 설정하면 탐색 버튼 위로 마우스를 이동할 때 반전 효과가 나타납니다.
너비: 찾아보기 버튼의 너비를 설정합니다. 기본값: 110.
높이: 찾아보기 버튼의 높이를 설정합니다. 기본값: 30.
wmode: 이 항목을 투명으로 설정하면 찾아보기 버튼의 플래시 배경 파일이 투명해지며, 플래시 파일은 페이지의 최상위 레이어로 설정됩니다
. 기본값: 불투명.
cancelImg: 파일 큐에 파일을 선택한 후 각 파일에 있는 닫기 버튼 아이콘

위에 소개된 키 값의 값은 모두 문자열 또는 Boolean 유형으로 상대적으로 간단하며 다음에 소개하겠습니다. 키 값의 값은 파일을 선택하거나 오류가 발생하거나 기타 작업을 수행할 때 사용자에게 일부 정보를 반환할 수 있는 함수입니다.

onInit: 초기화 작업 수행
onSelect: 파일이 선택될 때 트리거됩니다. 이 함수에는 세 가지 매개변수
event가 있습니다.
queueID: 파일의 고유 식별자로, 임의의 6개 문자로 구성됩니다.
fileObj: 선택한 파일 개체에는 이름, 크기, 생성 날짜, 수정 날짜 및 유형의 5가지 속성이 있습니다.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript ">
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader': 'JS/jquery.uploadify-v2. 1.0/uploadify .swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
'폴더': 'UploadFile' ,
'onSelect': function(e, queueId, fileObj)
{
Alert("고유 식별자:" queueId "rn"
"파일 이름:" fileObj.name "rn "
"파일 크기:" fileObj.size "rn"
"생성 시간:" fileObj.creationDate "rn"
"마지막 수정 시간:" fileObj.modificationDate "rn"
"파일 형식 :" fileObj.type
 
　
onSelectOnce: 단일 파일 또는 여러 파일을 업로드할 때 파일을 선택하면 트리거됩니다. 이 함수에는 event, data라는 두 개의 매개변수가 있으며 데이터 개체
에는 다음 속성이 있습니다.
fileCount: 선택한 파일의 총 수.
filesSelected: 동시에 선택되는 파일 수입니다. 한 번에 3개의 파일을 선택하는 경우 속성 값은 3입니다.
filesReplaced: 파일 큐에 두 개의 파일 A와 B가 이미 존재하고, 해당 파일을 다시 선택할 때 A와 B가 선택된 경우 속성 값은 2입니다.
allBytesTotal: 선택한 모든 파일의 총 크기입니다.
onCancel: 파일 대기열에 있는 파일의 닫기 버튼을 클릭하거나 업로드를 클릭하여 취소할 때 트리거됩니다. 이 함수에는 event, queueId, fileObj 및
data라는 4개의 매개변수가 있습니다. 처음 세 매개변수는 onSelect의 세 매개변수와 동일합니다. 데이터 객체에는 fileCount 및 allBytesTotal이라는 두 가지 속성이 있습니다.
fileCount: 파일을 취소한 후 파일 대기열에 남아 있는 파일 수입니다.
allBytesTotal: 파일을 취소한 후 파일 대기열에 남아 있는 파일의 크기입니다.

onClearQueue: fileUploadClearQueue 함수가 호출될 때 트리거됩니다. onCancel의 두 해당 매개변수와 동일한 두 개의 매개변수인 event와 data가 있습니다.
onQueueFull: queueSizeLimit이 설정되고 선택한 파일 수가 queueSizeLimit 값을 초과하면 트리거됩니다. 이 함수에는 두 개의
매개변수인 event와 queueSizeLimit가 있습니다.
onError: 업로드 중 오류가 발생하면 트리거됩니다. 이 함수에는 event, queueId, fileObj 및 errorObj라는 4개의 매개변수가 있습니다. 처음 세 개의 매개변수
는 위와 동일합니다. errorObj 개체에는 type과 info라는 두 가지 속성이 있습니다.
type: 오류 유형으로 'HTTP', 'IO', 'Security' 세 가지 유형이 있습니다.
info: 오류 설명
onOpen: 업로드를 클릭할 때 트리거되고, auto가 true로 설정된 경우 , 파일이 선택됩니다. 여러 파일이 업로드되면 트리거되며 전체 파일 대기열을 통과합니다.
이 함수에는 event, queueId, fileObj의 세 가지 매개변수가 있습니다. 매개변수에 대한 설명은 위와 같습니다.
onProgress: 업로드를 클릭하면 트리거됩니다. auto가 true로 설정된 경우, 업로드할 파일이 여러 개 있으면 전체 파일 대기열
열을 순회하여 트리거됩니다. onOpen 이후. 이 함수에는 event, queueId, fileObj, data라는 4개의 매개변수가 있습니다. 처음 세 매개변수에 대한 설명은 위와 같습니다.
데이터 객체에는 4가지 속성이 있습니다: 백분율, bytesLoaded, allBytesLoaded 및 속도:
percentage: 현재 완료된 백분율
bytesLoaded: 현재 업로드된 크기
allBytesLoaded: 파일 대기열의 크기 been uploaded
speed: 업로드 속도 kb/s
onComplete: 파일 업로드가 완료된 후 트리거됩니다. 이 함수에는 event, queueId, fileObj, response라는 4개의 매개변수와 처음 3개의 매개변수
가 위와 동일합니다. response는 백그라운드 핸들러가 반환한 값으로, 위 예에서는 1 또는 0입니다. 데이터에는 fileCount 및 speed
fileCount라는 두 가지 속성이 있습니다. 즉, 업로드되지 않은 나머지 파일 수입니다.
속도: 평균 파일 업로드 속도(kb/s)
참고: fileObj 개체는 위에서 언급한 것과 다소 다릅니다. onComplete의 fileObj 개체에는 업로드된 파일의 경로를 검색할 수 있는 filePath 속성이 있습니다.
onAllComplete: 파일 대기열의 모든 파일이 업로드된 후 트리거됩니다. 이 함수에는 이벤트와 데이터라는 두 가지 매개변수가 있습니다. 데이터에는

filesUploaded: 업로드된 모든 파일 수입니다.
오류: 오류 수입니다.
allBytesLoaded: 업로드된 모든 파일의 총 크기입니다.
속도: 평균 업로드 속도 kb/s