浅谈webuploader上传文件

最新推荐文章于 2023-12-01 15:21:41 发布

浏览器翻译官~

最新推荐文章于 2023-12-01 15:21:41 发布

阅读量383

点赞数

CC 4.0 BY-SA版权

文章标签： webuploader 上传文件

本文链接：https://blog.youkuaiyun.com/lbPro0412/article/details/83213446

本文介绍如何使用 WebUploader 实现文件上传过程中的实时进度显示，通过创建进度条并更新其宽度来反映上传进度。同时，文章还涵盖了文件上传成功、失败及完成后的处理方法，帮助开发者更好地管理和反馈文件上传状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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