리소스를 소개합니다
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 "> <! <! 나중에 표시->
파일 업로드
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>').파일 성공 및 실패 처리
파일 업로드가 실패하면 업로드 메러 이벤트가 전송되고 파일이 성공적으로 업로드되면 업로드 소송 이벤트가 전송됩니다. 성공 또는 실패에 관계없이 파일이 업로드 된 후 업로드 컴퓨터 이벤트가 트리거됩니다.
upload.on ( 'uploadsuccess', function (file) {$ ( '#'+file.id) .find ( 'p.state'). text ( 'uploaded');}); upload.on ( 'uploaderror', function (file) {$ ( '#'+file.id) .find ( 'p.state'). text ( 'Upload Error');}); UPLOWER.on ( 'upload complete', function (file) {$ ( '#'+file.id) .find ( '. progress'). fadeout ();}); UPLOWER.on ( 'upload complete', function (file) {$ ( '#'+file.id) .find ( '. progress'). fadeout ();});이미지 업로드
일반 파일 업로드와 비교 하여이 데모는 파일 필터링, 이미지 미리보기, 이미지 압축 업로드 및 기타 기능을 보여줍니다.
HTML
위와 같이 데모를 구현하려면 먼저 추가 파일 정보 목록을 저장할 버튼과 컨테이너를 준비해야합니다.
<!-DOM 구조 부품-> <div id = "Uploader-Demo"> <!-항목을 저장하는 데 사용됩니다-> <div id = "filelist"> </div> <div id = "FilePicker"> 사진 선택 </div> </div>
자바 스크립트
웹 업로더 인스턴스를 만듭니다
// 웹 업 로더 var uploader = webuploader.create ({// 파일을 선택한 후 자동으로 업로드 할 것인지, // swf 파일 경로 swf : base_url + '/js/uploader.swf', // file Reception server : 'http://webuploader.duapp.com/serverpp'/serverpp '/serverpp'servertopp 'servert. 파일 버튼 옵션. // 현재 실행에 따라 내부적으로 생성.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가 아닌 파일 인 경우이 메소드를 호출 할 필요가 없습니다. )}, 썸네일, 썸네일);나머지는 업로드 상태 프롬프트입니다. 파일 업로드 프로세스가 업로드되면 업로드가 성공하고 업로드가 실패하고 업로드가 완료되면 업로드 프로그램, 업로드 소송, 업로드 메러 및 업로드 컴퓨터 이벤트는 각각 업로드 프로토리, 업로드 소송, 업로드 테러 및 업로드 컴퓨터 이벤트에 해당합니다.
// 파일 업로드 중에 실시간으로 표시 할 진행률 표시 줄을 만듭니다. upload.on ( 'uploadprogress', function (파일, 백분율) {var $ li = $ ( '#'+file.id), $ % = $ li.Find ( '. Progress Span'); // 반복적 인 생성을 피하십시오 (! $ %.length) {$ % = $ ( '<p> <span> </p>'). .find ( 'span');} $ csss ( 'width', 백분율 * 100 + '%'); // 파일이 성공적으로 업로드되고 항목에 성공적인 클래스를 추가하고 업로드를 스타일로 표시합니다. UPLOADER.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 ();});위의 것은 웹 업로더를 사용하여 멀티 파일 업로드를 달성하여 귀하에게 소개 된 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!