webuploader上傳工具

2022-02-18 19:03:04 字數 1180 閱讀 6670

顯示使用者選擇

首先準備dom結構,包含存放檔案資訊的容器、選擇按鈕和上傳按鈕三個部分。

id="uploader" class="wu-example">

id="thelist" class="uploader-list">

class="btns">

id="picker">選擇檔案

id="ctlbtn" class="btn btn-default">開始上傳

具體說明,請看一下**中的注釋部分。

var uploader = webuploader.create();

由於webuploader不處理ui邏輯,所以需要去監聽filequeued事件來實現。

// 當有檔案被新增進佇列的時候

uploader.on( 'filequeued', function( file ) );

檔案上傳中,web uploader會對外派送uploadprogress事件,其中包含檔案物件和該檔案當前上傳進度。

// 檔案上傳過程中建立進度條實時顯示。

uploader.on( 'uploadprogress', function( file, percentage )

$li.find('p.state').text('上傳中');

$percent.css( 'width', percentage * 100 + '%' );

});

檔案上傳失敗會派送uploaderror事件,成功則派送uploadsuccess事件。不管成功或者失敗,在檔案上傳完後都會觸發uploadcomplete事件。

uploader.on( 'uploadsuccess', function( file ) );

uploader.on( 'uploaderror', function( file ) );

uploader.on( 'uploadcomplete', function( file ) );

WebUploader上傳檔案

引入資源檔案 個,css檔案和js檔案。function inituploader 檔案接收服務端 pick btnpicker 選擇檔案的按鈕,內部根據當前執行是建立,可能是input元素,也可能是flash.dnd page body 指定drag and drop拖拽的容器 compress ...

webuploader上傳檔案

var var btn ctlbtn 開始上傳 var thumbnailwidth 100 縮圖高度和寬度 單位是畫素 當寬高度是0 1的時候,是按照百分比計算,具體可以看api文件 var thumbnailheight 100 var uploader webuploader.create 當...

Web Uploader上傳檔案

2 使用web uploader檔案上傳需要引入三種資源 js,css,swf。src值根據檔案在專案中的位置而定 3 html部分 選擇檔案 開始上傳 關閉 檔案上傳示例 4 js部分 上傳初始化 function initupload chunked true,開起分片上傳。threads 1,...