zoukankan      html  css  js  c++  java
  • 七牛云大文件上传分片上传全代码

    测试需要根据空间更改region与token .

    注意:

    因为js是分片上传,每个片上传都要携带token,检查token有效期,一旦过期,后续片 块上传直接失败 . 所以还需要到生成token的sdk中修改有效期,默认是3600s

    <!DOCTYPE html>
    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <title>进度条属性上传</title>
    </head>
    <body>
        <form method="post" enctype="multipart/form-data">
          <input name="key"  type="hidden" value=""/>
          <input name="token"  type="hidden" value=""/>
          <input name="accept" type="hidden" />
          <input id="input-file" class="upload" type="file" value="" onchange="getPhoto(this)">
             <br/>
             <span class="img"> </span>
    
             <div id="totalBar" style="float:left;20%;height:30px;border:1px solid;border-radius:3px">
                <div id="totalBarColor" style="0%;border:0;background:#FFFE33; color: #FFF;height:28px;"></div>
                <span class="speed"></span>
             </div>
    
             <br/>
             <BR/>
          <input type="button" value="上传" onclick="upload()"/>
          <input type="button" value="暂停" onclick="filepause()"/>
        </form>
         <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
         <script src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
    
    
    
           <script>
                        var subObject;
                       var file;
                       //定义上传配置,注意上传域名的设置,华东空间z0,华南z2,华北z1
                       var config = {
                          region: qiniu.region.z0
                        };
    
    
                       //定义putExtra上传限制,只可以上传图片
                       var putExtra = {
                           params: { 'x:name': 'qiniu'},
                        };
    
                        var compareChunks = [];
                        var observable;
                        var subscription;
    
                        function getPhoto(node) {
                            var imgURL = "";
                            try{
                                file = null;
                                if(node.files && node.files[0] ){
                                    file = node.files[0];
                                }else if(node.files && node.files.item(0)) {
                                    file = node.files.item(0);
                                }
                            }catch(e){
    
                            }
                            creatImg(imgURL,file.name);
                            return imgURL;
                        }
    
                        function creatImg(imgRUL,fileName){
                            $("input[name=key]").val(fileName);
                            //var textHtml = "<img src='"+imgRUL+"'width='40px' height='40px'/>";
                            //$(".img").html(textHtml);
                            $("#totalBarColor").css("width","0%");
                        }
    
    
                      function upload() {
                                // 设置next,error,complete对应的操作,分别处理相应的进度信息,错误信息,以及完成后的操作
                            subObject = {
                                  next: next,
                                  error: error,
                                  complete: complete
                            };
                            token = "WuyN2MDHDJXHJDHSAJ16WICjYKpvycZmugQtCkL:xLRewO4tl9BLDJ1geunLPub6j5Q=:eyJzY2JHJHJ432432JHJ3GluZSI6MTYyMDQ0NTAxMn0="
                            //上传
                            observable = qiniu.upload(file, file.name, token, putExtra, config);
                            // 调用sdk上传接口获得相应的observable,控制上传和暂停
                            subscription = observable.subscribe(subObject);
                        }
    
                        function filepause(){
                           subscription.unsubscribe();
                        }
    
                        //分片上传返回response,标记上传进度
                        var next = function(response) {
                           var chunks = response.chunks||[];
                           var total = response.total;
                           $(".speed").text("进度:" + total.percent + "% ");
                           $("#totalBarColor")
                               .css(
                                    "width",
                                     total.percent + "%"
                           );
                           compareChunks = chunks;
                         };
    
                         var error = function(err) {
                               alert(err.message);
                         };
    
                         var complete = function(res) {
                             console.log(res);
                             console.log(res.key);
    
                         };
                </script>
    </body>
    
    </html>
    
  • 相关阅读:
    PAT B1027 打印沙漏 (20 分)
    PAT B1025 反转链表 (25 分)
    PAT B1022 D进制的A+B (20 分)
    PAT B1018 锤子剪刀布 (20 分)
    PAT B1017 A除以B (20 分)
    PAT B1015 德才论 (25 分)
    PAT B1013 数素数 (20 分)
    PAT B1010 一元多项式求导 (25 分)
    HDU 1405 The Last Practice
    HDU 1165 Eddy's research II
  • 原文地址:https://www.cnblogs.com/gyrgyr/p/14744211.html
Copyright © 2011-2022 走看看