webuploader.js 兼容h5与flash的多文件上传插件，百度出品-BFW插件库

webuploader.js 兼容h5与flash的多文件上传插件，百度出品
第一步引入bfwone
第二步执行插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["webuploader", "webuploader"], function() {
                var $ = jQuery,
                $list = $('#thelist'),
                $btn = $('#ctlBtn'),
                state = 'pending',
                uploader;

                uploader = WebUploader.create({

                    // 不压缩image
                    resize: false,

                    // swf文件路径
                    // swf: BASE_URL + '/js/Uploader.swf',

                    // 文件接收服务端。
                    server: 'http://webuploader.duapp.com/server/fileupload.php',

                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#picker'
                });

                // 当有文件添加进来的时候
                uploader.on('fileQueued', function(file) {
                    $list.append('<div id="' + file.id + '" class="item">' +
                        '<h4 class="info">' + file.name + '</h4>' +
                        '<p class="state">等待上传...</p>' +
                        '</div>');
                });

                // 文件上传过程中创建进度条实时显示。
                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();
                });

                uploader.on('all', function(type) {
                    if (type === 'startUpload') {
                        state = 'uploading';
                    } else if (type === 'stopUpload') {
                        state = 'paused';
                    } else if (type === 'uploadFinished') {
                        state = 'done';
                    }

                    if (state === 'uploading') {
                        $btn.text('暂停上传');
                    } else {
                        $btn.text('开始上传');
                    }
                });

                $btn.on('click', function() {
                    if (state === 'uploading') {
                        uploader.stop();
                    } else {
                        uploader.upload();
                    }
                });
            });
        });
    </script>
</head>
<body>
    <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>
    </body>
</html>
官方地址：http://fex.baidu.com/webuploader/