1. 程式人生 > >淺談webuploader上傳檔案

淺談webuploader上傳檔案

官網:http://fex.baidu.com/webuploader/getting-started.html

案例:

檔案上傳進度

// 檔案上傳過程中建立進度條實時顯示。
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 + '%' );
})

檔案成功、失敗處理

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();
});