php七牛云大文件上传javascript

最新推荐文章于 2023-10-19 14:28:17 发布

@土豆子

最新推荐文章于 2023-10-19 14:28:17 发布

阅读量229

点赞数

分类专栏： php 文章标签： php 七牛云存储 Powered by 金山文档

本文链接：https://blog.csdn.net/zhuxun_why/article/details/128812485

版权

php 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>进度条属性上传</title>
    <link rel="stylesheet" href="__STATIC__/plugs/layui-v2.5.6/css/layui.css" media="all">
</head>
<body>
<form method="post" enctype="multipart/form-data" style="width: 80%;margin-left: 10%;margin-top: 30px">
    <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)">
    <div class="layui-progress" lay-showPercent="true" lay-filter="demo" style="margin-top: 30px">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
    </div>
    <br/>

    <input type="button" class="layui-btn layui-btn-primary layui-border-green" value="上传" onclick="upload()"/>
    <input type="button" value="暂停" class="layui-btn layui-btn-danger" onclick="filepause()"/>
    

</form>




<script src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
<script src="__STATIC__/plugs/layui-v2.5.6/layui.all.js?v={$version}" charset="utf-8"></script>
<script>
    var element;
    layui.use('element', function(){
         element = layui.element;
    });
    var subObject;
    var file;

    var config = {
        useCdnDomain: true,
        region: qiniu.region.z0,//z2
    };

    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);
        $("#totalBarColor").css("width","0%");
    }


    function upload() {
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        subObject = {
            next: next,
            error: error,
            complete: complete
        };
        token = "你的token，后台生成的";
        //上传
        if (!file){
            layer.msg("请先选择有效文件文件");
            return false
        }
        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;
        element.progress('demo', total.percent + "% ");
        compareChunks = chunks;
    };

    var error = function(err) {
        //alert(err.message);
        layer.msg("上传失败")
    };

    var complete = function(res) {
        console.log(res);
        console.log(res.key);
        
    };
</script>
</body>

</html>