WebUploader 파일 업로드 컴포넌트는 최신 브라우저에서 HTML5의 장점을 완전히 활용할 수 있지만 원래 플래시 런타임을 사용하여 주류 IE 브라우저를 포기하지 않으며 IE6+, iOS 6+, Android 4+와 호환됩니다. 두 세트의 실행 시간, 동일한 통화 방법을 사용자가 선택할 수 있습니다. 대형 파일 조각화 동시 업로드를 사용하면 파일 업로드의 효율성이 크게 향상됩니다.
1. 기능 소개
샤딩, 동시성
샤드 및 동시성은 큰 파일을 여러 블록으로 나누고 동시에 업로드하여 큰 파일의 업로드 속도를 크게 향상시킵니다.
네트워크 문제로 인해 전송 오류가 발생하면 전체 파일이 아닌 오류 샤드를 역전하면됩니다. 또한 Shard Transmission은 업로드 진행 상황을 실시간으로 추적 할 수 있습니다.
미리보기, 압축
일반적인 이미지 형식 JPG, JPEG, GIF, BMP, PNG 미리보기 및 압축을 지원하여 네트워크 데이터 전송을 저장합니다.
JPEG의 메타 정보를 분석하고 다양한 방향을 올바르게 처리하십시오. 동시에 압축 후 이미지의 모든 원래 메타 데이터를 업로드하고 유지하십시오.
여러 채널을 통해 파일을 추가하십시오
다중 파일 선택, 유형 필터링, 드래그 앤 드롭 (파일 및 폴더) 및 사진 붙여 넣기 기능을 지원합니다.
페이스트 기능은 클립 보드에 이미지 데이터가있을 때 (QQ (Ctrl + Alt + A와 같은 스크린 샷 도구, 웹 페이지에서 이미지를 마우스 오른쪽 단추로 클릭하고 복사를 클릭)가 있으면 CTRL + V 가이 이미지 파일을 추가 할 수 있다는 사실에 주로 반영됩니다.
html5 & 플래시
주류 브라우저, 일관된 인터페이스 및 두 개의 런타임 지원 세트와 호환되므로 사용자는 내부적으로 사용되는 커널에 대해 신경 쓰지 않아도됩니다.
동시에 Flash Part는 UI 관련 작업을 수행하지 않으므로 Flash의 확장 및 맞춤형 비즈니스 요구에 신경 쓰지 않는 사용자에게 편리합니다.
MD5 초 패스
파일 크기가 크고 수량이 비교적 큰 경우 업로드하기 전에 파일 MD5 값 확인을 지원합니다. 일관된 경우 직접 건너 뛸 수 있습니다.
서버와 프론트 엔드는 알고리즘을 균일하게 수정하고 세그먼트 MD5를 취하면 검증 성능을 크게 향상시키고 약 20ms를 차지할 수 있습니다.
확장 및 분리가 쉽습니다
분리 가능한 메커니즘은 기능을 위젯으로 분리하기 위해 채택되며 자유롭게 일치 할 수 있습니다.
이 코드는 AMD 사양을 사용하여 구성되어 있으며 명확하고 명확하여 고급 플레이어가 확장 할 수 있도록 편리합니다.
리소스를 소개합니다
Web Uploader를 사용하여 파일을 업로드하려면 JS, CSS 및 SWF의 세 가지 리소스를 도입해야합니다.
<!-css 소개-> <link rel = "stylesheet"type = "text/css"href = "webuploader 폴더/webuploader.css"> <!-js 소개-> <script type = "text/javaScript"src = "webUploader/webuploader.js"> </script "> <! <! 나중에 표시->
2. 파일 업로드
WebUploader에는 파일 업로드의 기본 구현 만 포함되며 UI 부품은 포함되지 않습니다. 따라서 대화식 측면을 자유롭게 재생할 수 있습니다. 다음은 간단한 버전을 구현하는 방법을 보여줍니다.
HTML 부분
먼저 파일 정보를 저장하는 컨테이너, 선택 버튼 및 업로드 버튼을 포함하여 세 부분을 포함하여 DOM 구조를 준비하십시오.
<div id = "업 로더"> <!-파일 정보를 저장하는 데 사용됩니다-> <div id = "thelist"> </div> <div> <div = "picker"> 파일 선택 </div> <button id = "ctlbtn"> 시작 업로드 </div> </div> </div>
웹 업로더를 초기화하십시오
자세한 내용은 코드의 의견 섹션을 참조하십시오.
var 업 로더 = webuploader.create ({// swf 파일 경로 swf : base_url + '/js/uploader.swf', // 파일 리셉션 서버. 서버 : 'http://webuploader.duapp.com/server/fileupload.php', // 옵션 또는 옵션에 따라, // 옵션이 생성됩니다. Flash. Pick : '#Picker', // 이미지 압축 없음, 기본값 JPEG 인 경우 업로드하기 전에 압축하여 업로드합니다!사용자 선택을 표시하십시오
WebUploader는 UI 로직을 처리하지 않기 때문에 파일 큐어 이벤트를 듣기 위해 이벤트를 구현해야합니다.
// 파일이 큐 업 로더에 추가되면 ( 'filequeued', ( 'filequeued', function (file) {$ list.append ( '<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> 업로드를 기다릴 수 있습니다 ... </p>'</div> ');파일 업로드 진행 상황
파일이 업로드되면 웹 업로더는 파일 객체와 파일의 현재 업로드 진행 상황을 포함하는 업로드 프로그래드 이벤트를 보냅니다.
// 파일 업로드 중에 실시간으로 표시 할 진행률 표시 줄을 만듭니다. 업 로더.on ( 'uploadProgress', 함수 (파일, 백분율) {var $ li = $ ( '#' + file.id), $ % = $ li.Find ( '. procision .progress-bar'); // 반복적 인 생성을 피하십시오. '</div>'). 부록 ($ li) .find ( '. Progress-Bar');파일 성공 및 실패 처리
파일 업로드가 실패하면 업로드 메러 이벤트가 전송되고 파일이 성공적으로 업로드되면 업로드 소송 이벤트가 전송됩니다. 성공 또는 실패에 관계없이 파일이 업로드 된 후 업로드 컴퓨터 이벤트가 트리거됩니다.
UPLOADER.ON ( 'uploadSuccess', function (file) {$ ( '#'+file.id) .find ( 'p.state'). text ( 'uploaded');}); uploader.on ( 'uploaderror', function (file) {$ ( '#'+file.id) .find ( 'p.state'); 'UploadComplete', function (file) {$ ( '#'+file.id) .find ( '. progress'). fadeout ();});3. 사진 업로드
일반 파일 업로드와 비교 하여이 데모는 파일 필터링, 이미지 미리보기, 이미지 압축 업로드 및 기타 기능을 보여줍니다.
HTML
위와 같이 데모를 구현하려면 먼저 추가 파일 정보 목록을 저장할 버튼과 컨테이너를 준비해야합니다.
<!-DOM 구조 부품-> <div id = "Uploader-Demo"> <!-항목을 저장하는 데 사용됩니다-> <div id = "filelist"> </div> <div id = "FilePicker"> 사진 선택 </div> </div>
자바 스크립트
웹 업로더 인스턴스를 만듭니다
// Web UploaderVar Uploader = webuploader.create 초기화 ({// 파일을 선택한 후 자동으로 업로드할지 여부. Auto : True, // swf 파일 경로 swf : base_url + '/js/uploader.swf', // 파일 리셉션 서버 : 'http://webuploader.duapp.com/serverpp'/rectopload. 파일 버튼은 현재 실행에 따라 내부적으로 생성됩니다.uploader.makethumb을 통해 FileQueued 이벤트를 듣고 이미지 미리보기를 만듭니다.
추신 : 여기에있는 것은 데이터 URL 데이터이며 IE6 및 IE7은 직접 미리보기를 지원하지 않습니다. 플래시 또는 서버로 미리보기를 완료 할 수 있습니다.
// 파일이 추가되면 UPLOADER.ON ( 'FILEQUEUED', function (file) {var $ li = $ ( '<div id = "' + file.id + '">' + '<Img>' + '<div>' + file.name + '</div>' + '</div>'), $ img = $ li.find ( 'img'); $ list. ); // 썸네일 생성 // Image가 아닌 파일 인 경우이 메소드를 호출 할 필요가 없습니다. );}, 썸네일, 썸네일);});나머지는 업로드 상태 프롬프트입니다. 파일 업로드 프로세스가 업로드되면 업로드가 성공하고 업로드가 실패하고 업로드가 완료되면 업로드 프로그램, 업로드 소송, 업로드 메러 및 업로드 컴퓨터 이벤트는 각각 업로드 프로토리, 업로드 소송, 업로드 테러 및 업로드 컴퓨터 이벤트에 해당합니다.
// 파일 업로드 중에 실시간으로 표시 할 진행률 표시 줄을 만듭니다. 업 로더.on ( 'uploadProgress', 함수 (파일, 백분율) {var $ li = $ ( '#'+file.id), $ % = $ li.Find ( '. Progress Span'); // 반복 된 생성을 피하십시오 (! $ %.length) {$ % = $ ( '<p> <pan> </p>'). $%. upload.on ( 'uploadsuccess', function (file) {$ ( '#'+file.id) .addclass ( 'upload-state-done');}); // 업로드 오류가 표시되었습니다. uploader.on ( 'uploaderror', function (file) {var $ li = $ ( '#'+file.id), $ error = $ li.Find ( 'div.Error'); // 반복적 인 생성을 피하십시오 (! $ error.length) {$ error = $ ( '<div> </div>'). 완료되고 성공적이거나 실패하고 진행률 표시 줄을 먼저 삭제합니다. uploader.on ( 'upload complete', function (file) {$ ( '#'+file.id) .find ( '. progress'). remove ();});위는 웹 업로더 파일 업로드 플러그인을 사용하는 방법에 대한 소개입니다. 모든 사람의 학습에 도움이되기를 바랍니다.