JQuery 업로드 플러그 인 Uploadify 사용 설명 및 오류 처리
공식 다운로드
공식 문서
공식 시연저희 가 제공 하 는업로드 ify 다운로드 주소1 을 사용 하여 웹 프로젝트 를 만 드 는 방법 은 JQuery UploadDemo 라 고 부 릅 니 다.홈 페이지 에서 최신 버 전 을 다운로드 하여 압축 을 풀 고 프로젝트 에 추가 합 니 다.2 프로젝트 에 UploadHandler.ashx 파일 을 추가 하여 파일 의 업 로드 를 처리 합 니 다.3.업 로드 된 파일 을 저장 하기 위해 항목 에 UploadFile 폴 더 를 추가 합 니 다.위의 세 단 계 를 진행 한 후 프로젝트 의 기본 구 조 는 다음 과 같다.
4 Default.aspx 의 html 페이지 의 코드 수정 은 다음 과 같다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploadify</title>
<link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
rel="stylesheet" type="text/css" />
<link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>
<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
<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',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'auto': false,
'multi': true
});
});
</script>
</head>
<body>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()"> </a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()"> </a>
</p>
</body>
</html>
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath =
HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(uploadPath + file.FileName);
// ，
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
6 실행 후 효 과 는 다음 그림 과 같 습 니 다:
7 에서 두 개의 파일 을 선택 한 후 업 로드 를 클릭 하면 UploadFile 폴 더 에 두 개의 파일 이 추 가 됩 니 다.위의 코드 는 업로드 기능 을 간단하게 실현 합 니 다.함수 uploadiy 에 의 해 이 루어 집 니 다.uploadiy 함수 의 인 자 는 json 형식 입 니 다.json 대상 의 key 값 을 수정 하여 사용자 정의 설정 을 할 수 있 습 니 다.예 를 들 어 multi 는 true 나 false 로 설정 하여 다 중 파일 업로드 가 가능 한 지 여 부 를 제어 할 수 있 습 니 다.다음은 이러한 key 값 의 뜻 을 소개 합 니 다.
uploader:uploadify.swf 파일 의 상대 적 인 경로 입 니 다.이 swf 파일 은 문자 BROWSE 가 있 는 단추 입 니 다.클릭 한 후 파일 대화 상 자 를 꺼 내 고 기본 값:uploadify.swf 를 엽 니 다.script ： 배경 처리 프로그램의 상대 경로.기본 값:uploadify.php checkScript:서버 에 선택 한 파일 이 존재 하 는 지 여 부 를 판단 하 는 배경 처리 프로그램의 상대 경로 fileDataName:서버 처리 프로그램 에서 이 이름 에 따라 파일 을 업로드 할 데 이 터 를 지정 하 는 이름 을 설정 합 니 다.기본 값 은 Filedata method:제출 방식 Post 또는 Get 기본 값 은 Post scriptAccess:flash 스 크 립 트 파일 의 접근 모드 입 니 다.로 컬 테스트 에서 always 로 설정 하면 기본 값:same Domain folder ： 파일 에 저 장 된 디 렉 터 리 를 업로드 합 니 다.queueID:파일 대기 열의 ID 입 니 다.이 ID 는 파일 대기 열 을 저장 하 는 div 의 ID 와 일치 합 니 다.queueSizeLimit:많은 파일 이 생 성 될 때 선택 한 파일 의 개 수 를 설정 합 니 다.기본 값:999.multi:true 로 설정 할 때 여러 파일 을 업로드 할 수 있 습 니 다.auto:true 로 설정 하여 파일 을 선택 하면 바로 업로드 합 니 다.false 는 업로드 단 추 를 눌 러 야 업로드 합 니 다.fileDesc:이 속성 값 은 fileExt 속성 을 설정 해 야 유효 합 니 다.파일 선택 대화 상자 의 알림 텍스트 를 설정 합 니 다.예 를 들 어 fileDesc 를"rar doc pdf 파일 을 선택 하 십시오"로 설정 하고 파일 선택 상 자 를 열 면 다음 그림 과 같 습 니 다.
fileExt:선택 할 수 있 는 파일 의 형식 을 설정 합 니 다.예 를 들 어'*.doc;*.pdf;*.rar' 。 size Limit:파일 업로드 크기 제한.simUploadLimit:동시에 업로드 할 수 있 는 개수 기본 값:1.buttonText:단추 의 텍스트 를 탐색 합 니 다.기본 값:BROWSE.buttonImg:단추 의 그림 을 탐색 하 는 경로 입 니 다.hideButton:트 루 로 설정 하면 탐색 단추 의 그림 을 숨 깁 니 다.rollover:값 은 true 와 false 입 니 다.true 로 설정 할 때 탐색 단추 로 마 우 스 를 옮 길 때 반전 효과 가 있 습 니 다.width:탐색 단추 의 폭 을 설정 합 니 다.기본 값:110.height:탐색 단추 의 높이 를 설정 합 니 다.기본 값:30.wmode:이 항목 을 transparent 로 설정 하면 탐색 단추 의 플래시 배경 파일 을 투명 하 게 하고 플래시 파일 은 페이지 의 최고 층 으로 설 정 됩 니 다.기본 값:opaque.cancelImg:파일 대기 열 에 있 는 모든 파일 의 닫 기 단추 아이콘 을 선택 하 십시오.다음 그림:
위 에서 소개 한 key 값 의 value 는 모두 문자열 이나 불 형식 으로 비교적 간단 합 니 다.다음 에 소개 할 key 값 의 value 는 함수 입 니 다.파일,오류 또는 다른 작업 을 선택 할 때 사용자 에 게 정 보 를 되 돌려 줄 수 있 습 니 다.
onInit:초기 화 작업 을 합 니 다.
onSelect:파일 을 선택 할 때 촉발 합 니 다.이 함 수 는 세 개의 인자 가 있 습 니 다.
$(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',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'auto': false,
'multi': true,
'onInit':function(){alert("1");},
'onSelect': function(e, queueId, fileObj)
{
alert(" :" + queueId + "\r
" +
" ：" + fileObj.name + "\r
" +
" ：" + fileObj.size + "\r
" +
" ：" + fileObj.creationDate + "\r
" +
" ：" + fileObj.modificationDate + "\r
" +
" ：" + fileObj.type
);
}
});
});
onSelectOnce:단일 파일 이나 다 중 파일 을 업로드 할 때 파일 을 선택 할 때 터치 합 니 다.이 함수 에는 두 개의 매개 변수 이벤트 가 있 습 니 다.data,data 대상 은 다음 과 같은 몇 가지 속성 이 있 습 니 다.
fileCount:파일 의 총 수 를 선택 하 십시오.files Selected:파일 의 개 수 를 동시에 선택 합 니 다.한 번 에 3 개의 파일 을 선택 하면 이 속성 값 은 3 입 니 다.files Replaced:파일 대기 열 에 A 와 B 두 개의 파일 이 존재 한다 면 파일 을 다시 선택 할 때 A 와 B 를 선 택 했 습 니 다.이 속성 값 은 2 입 니 다.allBytesTotal:선택 한 모든 파일 의 총 크기 입 니 다.
onCancel:파일 대기 열 에 있 는 파일 의 닫 기 단 추 를 누 르 거나 업로드 취 소 를 누 르 면 실 행 됩 니 다.이 함 수 는 이벤트,queueId,fileObj,data 네 개의 매개 변수 가 있 고 앞의 세 개의 매개 변 수 는 onSelect 중의 세 개의 매개 변수 와 같 으 며 data 대상 은 두 개의 속성 fileCount 와 allBytesTotal 이 있 습 니 다.
fileCount:파일 을 취소 하면 파일 대기 열 에 남 은 파일 의 갯 수 입 니 다.allBytesTotal:파일 을 취소 하면 파일 대기 열 에 남 은 파일 의 크기 입 니 다.
onClearQueue:함수 fileUploadClearQueue 를 호출 할 때 촉발 합 니 다.이벤트 와 data 두 개의 인자 가 있 습 니 다.onCancel 의 두 개의 대응 하 는 인자 입 니 다.
onQueueFull:queueSizeLimit 를 설정 하고 선택 한 파일 개수 가 queueSizeLimit 의 값 을 초과 할 때 터치 합 니 다.이 함 수 는 두 개의 인자 이벤트 와 queue SizeLimit 가 있 습 니 다.
onError:업로드 중 오류 가 발생 했 을 때 발생 합 니 다.이 함 수 는 이벤트,queueId,fileObj,errorObj 네 개의 매개 변수 가 있 는데 그 중에서 앞의 세 개의 매개 변 수 는 같 고 errorObj 대상 은 type 과 info 두 개의 속성 이 있 습 니 다.
type:잘못된 타 입,세 가지'HTTP','IO',or'Security'info:잘못된 설명
onOpen:업로드 클릭 시 터치 합 니 다.auto 가 true 로 설정 되면 파일 을 선택 할 때 터치 합 니 다.여러 파일 이 업로드 되면 전체 파일 대기 열 을 옮 겨 다 닙 니 다.이 함 수 는 이벤트,queueId,fileObj 세 개의 매개 변수 가 있 고 매개 변수의 해석 은 같다.
onProgress:업로드 클릭 시 터치 합 니 다.auto 가 true 로 설정 되면 파일 을 선택 할 때 터치 합 니 다.여러 파일 이 업로드 되면 전체 파일 대기 열 을 옮 겨 다 니 며 onOpen 이후 에 터치 합 니 다.이 함 수 는 이벤트,queueId,fileObj,data 네 개의 매개 변수 가 있 고 앞의 세 개의 매개 변수의 해석 은 같다.data 대상 은 네 개의 속성 percentage,by tesLoaded,allBytesLoaded,speed 가 있 습 니 다.
percentage:현재 완 료 된 백분율 bytes Loaded:현재 업로드 한 크기 allBytes Loaded:파일 대기 열 에 업로드 한 크기 speed:업로드 속도 kb/s
onComplete:파일 업로드 완료 후 터치 합 니 다.이 함 수 는 네 개의 매개 변수 이벤트,queueId,fileObj,response,data 다섯 개의 매개 변수 가 있 고 앞의 세 개의 매개 변 수 는 같 습 니 다.response 는 배경 처리 프로그램 이 되 돌아 오 는 값 입 니 다.위의 예 에서 1 또는 0 이 고 data 는 두 개의 속성 fileCount 와 speed 가 있 습 니 다.
fileCount:업로드 되 지 않 은 파일 의 개수 가 남 았 습 니 다.speed:파일 업로드 의 평균 속도 kb/s 주:fileObj 대상 은 위 에서 말 한 것 과 다 릅 니 다.onComplete 의 fileObj 대상 은 filePath 속성 이 있어 서 파일 을 업로드 하 는 경 로 를 추출 할 수 있 습 니 다.
onAllComplete:파일 대기 열 에 있 는 모든 파일 업로드 가 완료 되면 터치 합 니 다.이 함 수 는 이벤트 와 data 두 개의 매개 변수 가 있 고 data 는 네 개의 속성 이 있 으 며 각각 다음 과 같 습 니 다.
files Uploaded:업로드 한 모든 파일 갯 수 입 니 다.errors:잘못된 개수 가 발생 했 습 니 다.allBytesLoaded:모든 업로드 파일 의 총 크기 입 니 다.속도:평균 업로드 속도 kb/s
관련 함수 소개
위의 예 에서 uploadifyUpload 와 uploadifyClearQueue 두 가지 함 수 를 사 용 했 습 니 다.그 밖 에 몇 가지 함수 가 있 습 니 다.
uploadifySettings:아래 코드 와 같이 위 에 소 개 된 key 값 을 동적 으로 수정 할 수 있 습 니 다.
$('#uploadify').uploadifySettings('folder','JS');
업로드 단추 의 이 벤트 를 다음 과 같이 쓰 면 파일 은 uploadifySettings 가 정의 하 는 디 렉 터 리 에 업 로드 됩 니 다.
업로드
uploadifyCancel:이 함 수 는 queueID 를 매개 변수 로 받 아들 여 파일 대기 열 에 지정 한 queueID 파일 을 취소 할 수 있 습 니 다.
$('#uploadify').uploadifyCancel(id);
자,모든 설정 이 완료 되 었 습 니 다.다음은 내 가 만난 몇 가지 문 제 를 말 해 보 자.span style="font-size: 18pt;">문제 가 발생 할 수 있 습 니 다. ）불 러 오지 않 았 습 니 다.나중에 jquery.uploadify.v 2.1.0.js 를 살 펴 보 니 이 플러그 인 은 swfobject.js 를 이용 하여 동적 으로 만 든 FLASH 라 는 것 을 알 게 되 었 습 니 다.나중에 저 는 단독으로 시험 을 했 지만 플래시 를 표시 할 수 없 었 습 니 다.견 딜 수 없 이 컴퓨터 를 다시 시작 하면 됩 니 다.쓰 러 졌 습 니 다~~~2.FLASH 가 드디어 불 러 왔 지만 업로드 에 실 패 했 습 니 다.IOError 보고,그림 참조:
아무리 생각해 도 이해 가 되 지 않 고 각 인터넷 을 샅 샅 이 뒤 져 서 마침내 외국 의 한 사이트 에서 이런 using System.IO 를 보 았 다.첨가 의 탁 트 임!!
아직 다른 문제 에 부 딪 히 지 않 았 으 니,후속 발견 문 제 는 더 하 자.우리 가 제공 한업로드 ify 다운로드 주소
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JQuery 업로드 플러그 인 Uploadify 사용 설명 및 오류 처리uploader:uploadify.swf 파일 의 상대 적 인 경로 입 니 다.이 swf 파일 은 문자 BROWSE 가 있 는 단추 입 니 다.클릭 한 후 파일 대화 상 자 를 꺼 내 고 기본 값:uploadify....
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
