WebUploader는 DOM 구조 준비, 초기화, 사용자 선택 표시, 파일 업로드 진행률 및 프롬프트 정보를 통해 JS, CSS 및 SWF 리소스를 가져옵니다.
WebUploader 데모에서 CSS 및 기타 리소스를 가져오는 프로세스:
WebUploader 개요: WebUploader는 Baidu WebFE(FEX) 팀이 개발하고 FLASH로 보완된 간단한 HTML5 기반 소프트웨어입니다. . 최신 파일 업로드 구성 요소. WebUploader 파일 업로드 구성 요소는 원본 FLASH 런타임을 사용하여 주류 IE 브라우저를 버리지 않으면서 최신 브라우저에서 HTML5의 장점을 최대한 활용할 수 있으며 IE6, iOS 6, Android 4와 호환됩니다. 두 런타임 세트는 동일한 호출 방법을 가지며 사용자가 선택할 수 있습니다. 대용량 파일을 조각으로 동시에 업로드하면 파일 업로드 효율성이 크게 향상됩니다.
기능 소개:
A. 샤딩과 동시성: 샤딩과 동시성을 결합하여 대용량 파일을 여러 블록으로 나누어 동시에 업로드하므로 대용량 파일의 업로드 속도가 크게 향상됩니다. .
B. 조각화 및 동시성: 조각화와 동시성을 결합하여 대용량 파일을 여러 블록으로 나누어 동시에 업로드하므로 대용량 파일의 업로드 속도가 크게 향상됩니다.
네트워크 문제로 인해 전송 오류가 발생하는 경우 전체 파일이 아닌 잘못된 부분만 재전송하면 됩니다. 또한 조각난 전송을 통해 업로드 진행 상황을 보다 실시간으로 추적할 수 있습니다.
C. 미리보기 및 압축: jpg, jpeg, gif, bmp, png 등 일반적인 이미지 형식의 미리보기 및 압축을 지원하여 네트워크 데이터 전송을 절약합니다.
Jpeg의 메타정보를 파싱하고, 다양한 방향을 정확하게 처리하고, 압축 후 이미지의 원본 메타데이터를 모두 업로드합니다.
D. 다양한 방법으로 파일 추가: 여러 파일 선택, 유형 필터링, 드래그 앤 드롭(파일 및 폴더), 사진 붙여넣기 기능을 지원합니다.
붙여넣기 기능은 클립보드에 이미지 데이터가 있을 때 CtrlV를 누르면 이미지 파일을 추가할 수 있다는 점에서 주로 반영된다.
E. HTML5 및 FLASH: 일관된 인터페이스와 두 가지 런타임 지원을 통해 주류 브라우저와 호환됩니다. 사용자는 내부적으로 어떤 커널이 사용되는지 신경 쓸 필요가 없습니다.
동시에 플래시 부분은 UI 관련 작업을 전혀 하지 않기 때문에 플래시에 관심이 없는 사용자가 비즈니스 요구 사항을 확장하고 사용자 정의하는 데 편리합니다.
F. MD5 두 번째 업로드: 파일 크기가 큰 경우 업로드 전 파일 md5 값 확인을 지원하며, 일치하는 경우 바로 건너뛸 수 있습니다.
서버와 프런트엔드가 알고리즘을 균일하게 수정하여 md5 세그먼트를 차지하게 되면 검증 성능이 크게 향상될 수 있으며, 검증 성능에는 약 20ms가 소요됩니다.
G. 간편한 확장 및 분리 가능: 각 기능을 작은 구성 요소로 분리하여 자유롭게 결합할 수 있는 분리형 메커니즘을 채택했습니다.
AMD 표준을 사용하여 코드를 정리하면 고급 플레이어가 확장하기가 명확하고 쉽습니다.
H. 리소스 소개: 웹 업로더를 사용하여 파일을 업로드하려면 JS, CSS 및 SWF라는 세 가지 리소스가 필요합니다.
lt;!--CSS 소개--gt;
lt;link?rel="stylesheet"?type="text/css"?href="webuploader 폴더/webuploader.css"gt;< / p>
lt;!--JS 소개--gt;
lt;script?type="text/javascript"?src="webuploader 폴더/webuploader.js"gt;lt ;/ scriptgt;
lt;!--SWF는 초기화 중에 --gt를 지정합니다.
파일 업로드: WebUploader에는 UI 부분을 제외하고 파일 업로드의 기본 구현만 포함됩니다. 그래서 상호작용 측면에서 자유롭게 플레이할 수 있습니다.
HTML 부분입니다. 먼저 파일 정보를 저장하는 컨테이너, 선택 버튼, 업로드 버튼의 세 부분으로 구성된 DOM 구조를 준비합니다. lt;div?id="uploader"?class="wu-example"gt; lt;!--파일 정보를 저장하는 데 사용--gt; gt;lt;/divgt;lt;div?class="btns"gt;lt;div?id="picker"gt;파일 선택lt;/divgt;lt;button?id="ctlBtn"?class="btn ? btn-default"gt;업로드 시작lt;/buttongt;lt;/divgt;lt;/divgt;
B. 웹 업로더를 초기화합니다. 구체적인 지침을 보려면 코드의 주석을 살펴보세요. var?uploader?=?WebUploader.create({ //?swf 파일 경로 swf:?BASE_URL? ?'/js/Uploader.swf', //?파일 수신 서버. server: ?'Url/fileupload.php' , //?파일을 선택하는 버튼입니다. //?현재 작업에 따라 내부적으로 생성됩니다. pick:?'#picker', //?이미지를 압축하지 않습니다. ,?Jpeg인 경우 기본값입니다. 업로드하기 전에 파일이 압축됩니다.?false
});
C. webuploader는 UI 로직을 처리하지 않으므로 이를 구현하려면 fileQueued 이벤트를 수신해야 합니다.
D. 파일 업로드 진행 상황. 파일 업로드 중에 웹 업로더는 파일 객체와 파일의 현재 업로드 진행 상황이 포함된 uploadProgress 이벤트를 외부로 전달합니다.
E. 파일 성공 및 실패 처리. 파일 업로드에 실패하면 uploadError 이벤트가 전달되고, 파일 업로드에 성공하면 uploadSuccess 이벤트가 전달됩니다. 성공 또는 실패에 관계없이 파일이 업로드된 후 uploadComplete 이벤트가 트리거됩니다.
Web Uploader 인스턴스 생성 //?Web?Uploader 초기화
var?uploader?=?WebUploader.create({ //?파일 선택 후 자동으로 업로드할지 여부. auto : ?true, //?swf 파일 경로 swf: ?BASE_URL? ?'/js/Uploader.swf', //?파일 수신 서버 서버: ?'/server/fileupload.php', //?파일을 선택합니다. 버튼.
//?현재 작업을 기반으로 내부적으로 생성됩니다. 입력 요소 또는 플래시일 수 있습니다. pick:?'#filePicker', //?이미지 파일만 선택할 수 있습니다. 허용:?{ 제목:?'이미지', 확장:?'gif, jpg, jpeg, bmp, png', mimeTypes:?'image/*' }
});
< p>첨부 파일:fileQueued 이벤트를 수신하고 uploader.makeThumb을 통해 이미지 미리보기를 만듭니다. 추신: 여기서 얻는 것은 데이터 URL 데이터입니다. IE6 및 IE7은 직접 미리보기를 지원하지 않습니다. FLASH 또는 서버를 사용하여 미리보기를 완료할 수 있습니다.
그럼 남은 것은 업로드 상태 프롬프트입니다. 파일 업로드 프로세스 중에 업로드 성공, 업로드 실패 및 업로드 완료는 각각 uploadProgress, uploadSuccess, uploadError 및 uploadComplete 이벤트에 해당합니다.