七牛云前端简单上传demo

demo:

<!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;width:20%;height:30px;border:1px solid;border-radius:3px">
            <div id="totalBarColor" style="width: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@3.3.3/dist/qiniu.min.js"></script>

<script>
                    var subObject;
                    var file;
                    //定义上传配置，注意上传域名的设置，华东空间z0,华南z2，华北z1
                    var config = {
                      region: qiniu.region.z2
                    };

var putExtra = {

};

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 = "设置你们的上传token"
                        //上传
                        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>

 

posted @ 2022-09-27 19:16  study_php_java_C++  阅读(81)  评论(0)  编辑  收藏  举报