happyml-oss-js-upload
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oss js upload</title>
</head>
<body>

<button id="select-file">选择文件</button>
<br/>
<div>
    <img class="res-img" width="200"/>
</div>
<br/>
<div>
    <a class="res-img-href" href="#" target="_blank"></a>
</div>

<!--阿里的这些js要引入-->
<script type="text/javascript" src="oss-js-upload.js/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="oss-js-upload.js/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="oss-js-upload.js/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="oss-js-upload.js/lib/base64.js"></script>
<script type="text/javascript" src="oss-js-upload.js/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<!--环境变量-->
<script type="text/javascript" src=".env.js"></script>
<!--封装的上传-->
<script type="text/javascript" src="oss-js-upload.js/oss-js.js"></script>
<script type="text/javascript">

    var ossJsUpload=new OssJsUpload({
        uploadButId:'select-file',
        accessid:ACCESS_ID,//环境变量文件里获取
        accesskey:ACCESS_KEY,//.
        host:ACCESS_HOST,//.
        dir:'test',//路径
        onceMulti:false,
    },{
        added:function(file){
            if(['image/jpg','image/jpeg','image/png','image/gif'].indexOf(file.type)==-1)
                return false;
        },
        before:function(file){
        },
        progress:function(file){
            console.log('progress:'+file.percent);
        },
        success:function(file){
            console.log('success:'+file.finallyRes);
            var src=ACCESS_HOST+'/'+file.finallyRes;
            document.getElementsByClassName('res-img')[0].src=src;
            document.getElementsByClassName('res-img-href')[0].href=src;
            document.getElementsByClassName('res-img-href')[0].innerHTML=src;
        },
        error:function(file){
            console.log('error');
        },
    });

</script>
</body>
</html>