plupload实现上传文件到七牛进度条显示

1.引入相关插件
<script src="//cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script src="//cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>

2.实力化上传插件

 <script type="text/javascript">

                    var token = "{{$token}}";  //获取上传凭证token

                    var uploader = Qiniu.uploader({
                        runtimes: 'html5,flash,html4', //上传模式,依次退化
                        container: 'container', //上传区域DOM ID，默认是browser_button的父元素，
                        browse_button: 'upload', //上传选择的点选按钮，**必需**  id
                        drop_element: 'container', //拖拽区域,以上这三个属性都是字符串类型
                        uptoken: token,
                        domain: 'airlink', //bucket 域名，下载资源时用到，**必需**
                        get_new_uptoken: false, //设置上传文件的时候是否每次都重新获取新的token
                        max_file_size: '500mb', //最大文件体积限制
                        max_retries: 3, //上传失败最大重试次数
                        chunk_size: '10mb', //分块上传时，每片的体积
                        flash_swf_url: '/js/plupload/Moxie.swf', // flash的相对地址
                        auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                        unique_names: true, //设置所有文件名唯一
                        multi_selection: false, //不允许多选
                        filters: {
                            mime_types: [ //只允许上传图片
                                {
                                    title: "Image files",
                                    extensions: "exe"
                                }
                            ],
                            prevent_duplicates: true, //不允许选取重复文件
                            max_file_size: '500mb'
                        },
                        resize: { //对上传的图片进行压缩
                            width: 1080, // 宽
                            height: 500, // 高
                            quality: 80, // 压缩质量，只对jpg格式的图片有效，默认为90，100为不压缩，越大质量越好
                            crop: false // 是否裁剪图片
                        },
                        init: {
                            //选择文件
                            'FilesAdded': function (up, files) {
                                console.log(files);
                                files = files[0];
                                console.log(files.name);
                                size = conver(files.size);

                                $('.file-zone').css('display','block')
                                $('#fsUploadProgress').find('tr').remove();

                                html= `<tr id="o_1drl54r9d1rubvfeds2nj8ag9a" class="progressContainer"style="opacity: 1;">
                                    <td class="progressName">`+files.name+` </td>
                                    <td class="progressFileSize">`+size+`</td>
                                    <td id="o_1drl54">
                                            <div class="progress">
                                                <div class="progress-bar" id='progress-bar' role="progressbar" aria-valuenow="60"
                                                    aria-valuemin="0" aria-valuemax="100" style="width: 0%;">

                                                </div>

                                             </div>
                                     </td>
                                </tr>`
                               
                                $('#fsUploadProgress').append(html);

                                // 选择文件后的回调
                                // files为本次添加的图片列表，files[0].getNative()可以获取原生文件对象
                            },
                            'BeforeUpload': function (up, file) {
                                // 每个文件上传前,处理相关的事情
                            },
                          //文件上传中
                            'UploadProgress': function (up, file) {
                                console.log(file.percent)
                                document.getElementById('progress-bar').style.width = file.percent+'%';
                                document.getElementById('progress-bar').innerHTML = file.percent+'%';
                                // 每个文件上传时,处理相关的事情
                            }, 
                           //文件上传完成
                            'FileUploaded': function (up, file, info) {
                                var box = document.getElementById('o_1drl54');

                                console.log(box);
                                box.innerHTML ="上传完成";
                                // 每一张图片上传完成后的回调
                                // info中为七牛返回的相关信息，为一个json字符串，比如下面这个
                                // "{"bucket":"jb-medical","colorModel":"ycbcr","duration":null,"fname":"0544577b91a59efaf39fea77e11dda4a.jpg","format":"jpeg","fsize":92380,"hash":"FquL9DHBuzzlR5V-v0TOn4bCQxIf","height":675,"key":"o_1bhegvmtvk64inehuv1qvf17dro.jpg","size":null,"url":"https://oi3o224r8.qnssl.com","width":1080}"
                                info = JSON.parse(info);  // 转成json
                                var src = 'http://download.timelink.cn/' + info.key;  // 获取到图片的七牛url
                                console.log(src);
                                $('#name').val(file.name);
                                $('#path').val(src);
                                var stamp = document.getElementById("submit");//设置按钮可用
                                stamp.disabled = false;

                            },
                            'Error': function (up, err, errTip) {
                                // 错误回调，具体的code见Plupload文档，如果引入了语言包，errTip会是对应语言的错误提示
                                if (err.code == -600) {
                                    // size超过5m
                                    alert('每张图片大小请勿超过5M')
                                } else {
                                    alert(errTip)
                                }
                            },
                            'UploadComplete': function (up, file) {
                                //队列文件处理完毕后,处理相关的事情
                            }
                        }
                    });

注意点
如果设置为不自动上传，则需要用js手动启动上传
uploader.start();
文件的删除和添加
uploader.removeFile(file);
uploader.addFile(file);