引入資源

使用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>

<!--SWF在初始化的時候指定，在後面將展示-->

檔案上傳

WebUploader只包含檔案上傳的底層實現，不包括UI部分。所以互動方面可以自由發揮，以下將演示如何去實現一個簡單的版本。

請點選下面的選擇檔案按鈕，然後點選開始上傳體驗此Demo。

2-1.png

上傳出錯

Html部分

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

<div id="uploader" class="wu-example">
    <!--用來存放檔案資訊-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker"
 
>選擇檔案</div>
        <button id="ctlBtn" class="btn btn-default">開始上傳</button>
    </div>
</div>

初始化Web Uploader

具體說明，請看一下程式碼中的註釋部分。

var uploader = WebUploader.create({

    // swf檔案路徑
    swf: BASE_URL + '/js/Uploader.swf',

    // 檔案接收服務端。
    server: 'http://webuploader.duapp.com/server/fileupload.php'
 
,

    // 選擇檔案的按鈕。可選。
    // 內部根據當前執行是建立，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
    resize: false
});

顯示使用者選擇

由於webuploader不處理UI邏輯，所以需要去監聽fileQueued事件來實現。

// 當有檔案被新增進佇列的時候
uploader.on( 'fileQueued', function( file ) {
    $list.append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p class="state">等待上傳...</p>' +
    '</div>' );
});

檔案上傳進度

檔案上傳中，Web Uploader會對外派送uploadProgress事件，其中包含檔案物件和該檔案當前上傳進度。

// 檔案上傳過程中建立進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');

    // 避免重複建立
    if ( !$percent.length ) {
        $percent = $('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
        '</div>').appendTo( $li ).find('.progress-bar');
    }

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

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

檔案成功、失敗處理

檔案上傳失敗會派送uploadError事件，成功則派送uploadSuccess事件。不管成功或者失敗，在檔案上傳完後都會觸發uploadComplete事件。

uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).find('p.state').text('已上傳');
});

uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上傳出錯');
});

uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});

圖片上傳

與普通檔案上傳相比，此demo演示了：檔案過濾，圖片預覽，圖片壓縮上傳等功能。

Html

要實現如上demo，首先需要準備一個按鈕，和一個用來存放新增的檔案資訊列表的容器。

<!--dom結構部分-->
<div id="uploader-demo">
    <!--用來存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">選擇圖片</div>
</div>

Javascript

建立Web Uploader例項

// 初始化Web Uploader
var uploader = WebUploader.create({

    // 選完檔案後，是否自動上傳。
    auto: true,

    // swf檔案路徑
    swf: BASE_URL + '/js/Uploader.swf',

    // 檔案接收服務端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 選擇檔案的按鈕。可選。
    // 內部根據當前執行是建立，可能是input元素，也可能是flash.
    pick: '#filePicker',

    // 只允許選擇圖片檔案。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});

監聽fileQueued事件，通過uploader.makeThumb來建立圖片預覽圖。
PS: 這裡得到的是Data URL資料，IE6、IE7不支援直接預覽。可以藉助FLASH或者服務端來完成預覽。

// 當有檔案新增進來的時候
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');


    // $list為容器jQuery例項
    $list.append( $li );

    // 建立縮圖
    // 如果為非圖片檔案，可以不用呼叫此方法。
    // thumbnailWidth x thumbnailHeight 為 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能預覽</span>');
            return;
        }

        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});

然後剩下的就是上傳狀態提示了，當檔案上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應uploadProgress,uploadSuccess, uploadError, uploadComplete事件。

// 檔案上傳過程中建立進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress span');

    // 避免重複建立
    if ( !$percent.length ) {
        $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
    }

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

// 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
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');

    // 避免重複建立
    if ( !$error.length ) {
        $error = $('<div class="error"></div>').appendTo( $li );
    }

    $error.text('上傳失敗');
});

// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').remove();
});

更多細節，請檢視js原始碼。