Github上的例子没看太明白，在网上找了些资料自己写了个demo，基本上就是用create方法初始化，然后on一堆事件，上传的进度条用的是swf格式的动画，感觉不是很先进的样子。不过我暂时也没搞明白怎么让进度条显示出来。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link  href="./css/webuploader.css" rel="stylesheet">

</head>

<body>

    <div id="uploader">

        <!--用来存放文件信息-->

        <div id="thelist"></div>

        <div>

            <div id="picker">选择文件</div>

            <button id="ctlBtn">开始上传</button>

        </div>

    </div>

    <script src="./js/jquery-1.11.3.min.js"></script>

    <script src="./js/webuploader.js"></script>

    <script>

        var uploader = WebUploader.create({

            // swf文件路径

            swf: './js/Uploader.swf',

            // 文件接收服务端。

            server: 'http://localhost:8888/uploader.html',

            // 选择文件的按钮。可选。

            // 内部根据当前运行是创建，可能是input元素，也可能是flash.

            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

            resize: false

        });

        // 当有文件被添加进队列的时候

        uploader.on( 'fileQueued', function( file ) {

            alert(file.id + ":" + file.name + "被添加进队列");

        });

        // 文件上传过程中创建进度条实时显示。

        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 + '%' );*/

            alert("传输中，此时显示进度条");

        });

        uploader.on( 'uploadSuccess', function( file ) {

            /*$( '#'+file.id ).find('p.state').text('已上传');*/

            alert("上传成功");

        });

        uploader.on( 'uploadError', function( file ) {

            /*$( '#'+file.id ).find('p.state').text('上传出错');*/

            alert("上传失败");

        });

        uploader.on( 'uploadComplete', function( file ) {

            /*$( '#'+file.id ).find('.progress').fadeOut();*/

            alert("上传结束");

        });

        $("#ctlBtn").on('click', function() {

            uploader.upload();

        });

    </script>

</body>

</html>

Web Uploader的更多相关文章

  1. Web Uploader - 功能齐全，完美兼容 IE 的上传组件

    文件上传是网站和 Web 应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题. WebUploader 是由 Baidu FEX 团队开发的一款以 HTML ...

  2. 使用的组件：Web Uploader

    Web UploaderWebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势, ...

  3. Web Uploader文件上传插件

    http://www.jq22.com/jquery-info2665   插件描述:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现 ...

  4. Web Uploader文件上传&&使用webupload有感（黄色部分）

    引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" ...

  5. 优秀的前端上传文件插件 web uploader

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  6. 使用上传插件 Web Uploader 上传图片到七牛云（C#）

    之前有写过一篇文章,基于asp.net mvc 封装 Web Uploader 上传插件: http://www.cnblogs.com/vanteking/p/5623682.html 已经实现的功 ...

  7. 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)

    Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...

  8. 百度Web Uploader组件实现文件上传(一)

    Web Uploader WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势 ...

  9. Web Uploader在低版本IE下无法显示Flash的一种情况

    用户反馈在IE 8下无法正常显示Web Uploader控件,并已安装了Flash插件.调试发现在内部抛出了Runtime Error的错误,关键代码如下: Runtime.create = func ...

  10. [ IE浏览器兼容问题 ] Web Uploader 在IE、FireFox下点击上传没反应

    一.项目源码: > html > js 初始化插件: 事件绑定:avalon > web > 报错: - IE: 脚本缺少对象 - FireFox: js业务逻辑代码部分事件正 ...

随机推荐

  1. Visual Studio 中配置openCV问题

    1. 首先强调一点:VS与openCV的版本对应问题,一般而言,openCV对于VS采用向下的支持方式: vc6 -> VS6.0 vc7.0 -> VS2002 vc7.1 -> ...

  2. AlarmManager的使用

    原文地址:http://www.cnblogs.com/kross/p/3643708.html AlarmManager可以设定一个规定的时间,或者重复从某一个时间开始,等间隔的做一个操作.可以用来 ...

  3. oracle 月份中日的值必须介于 1 和当月最后一日之间

    解决方法: 1.用时间字段去关联字符串字段导致此错误.. 如果1.解决不了就看 2.把date'2017-01-01'  换成 to_date('2017-01-01','yyyy-mm-dd')

  4. CF1088F Ehab and a weird weight formula 贪心 倍增

    CF1088F Ehab and a weird weight formula 题意 给定一棵树,点有点权,其中这棵树满足除了权值最小的点外,每个点至少有一个点权小于它的相邻点. 要求你重新构建这棵树 ...

  5. Spring点滴六：Spring中定义bean的继承

    在基于XML配置元数据中,bean标签可以包含很多配置信息,可以包含构造函数的参数,属性值以及其他一些初始化方法.子bean的定义可以继承父bean定义元数据,子bean定义可以根据需要重写父bean ...

  6. 【LOJ2541】【PKUWC2018】猎人杀（容斥，FFT）

    [LOJ2541][PKUWC2018]猎人杀(容斥,FFT) 题面 LOJ 题解 这题好神仙啊. 直接考虑概率很麻烦,因为分母总是在变化. 但是,如果一个人死亡之后,我们不让他离场,假装给他打一个标 ...

  7. LINUX第四周学习

    <Linux内核设计与实现>第四周读书笔记——第五章 5.1 与内核通信57 系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: 首先它为用户空间提供了一种硬件的抽 ...

  8. BZOJ.1036 [ZJOI2008]树的统计Count ( 点权树链剖分 线段树维护和与最值)

    BZOJ.1036 [ZJOI2008]树的统计Count (树链剖分 线段树维护和与最值) 题意分析 (题目图片来自于 这里) 第一道树链剖分的题目,谈一下自己的理解. 树链剖分能解决的问题是,题目 ...

  9. keepalived回顾

    Keepalived是lvs的扩展项目,因此它们之间具备良好的兼容性. 通过对服务器池对象的健康检查,实现对失效机器/服务的故障隔离: 负载均衡器之间的失败切换failover,通过VRRPv2 st ...

  10. C 语法中static 和inline联合使用

    最近在学习阶段,翻阅代码.发现有一个用法比较让我奇怪,就上网查了一下 ? 1 static inline void somefunction(void); 这里是举例说明,这行代码是放在.h文件中的. ...