博客

multipartUpload上传图片到阿里云

  • Post author:
  • Post category:其他


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>阿里云上传图片</title>
        <style>
            #imgBox{
                width:100%;
                height: 100%;
                border:1px solid #000;
            }
            .upDateImg{
                height: 150px;
            }
        </style>
    </head>
    <body>
        <input type="file" id="file" />
        <div id="imgBox"></div>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
    <script>
        var client;    
        var file;
        $.ajax({
            type:"post",
            url:"http://oss.beibeiyue.com/oss/getOSSToken",
            data:{
                type:1
            },
            dataType:"json",
            success:function(res){
                var bucket = 'ylbb-business';
                var region = 'oss-cn-beijing';   //申请oss服务时的区域
                if(res.result == 0){ 
                    client = new OSS.Wrapper({
                      region: region,
                      accessKeyId: res.data.accessKeyId,
                      accessKeySecret: res.data.accessKeySecret,
                      stsToken: res.data.securityToken,
                      bucket: bucket
                    });
               }
            },
            fail:function(){
                mui.toast("网络连接失败,请稍后再试")
            }
        });
        
        
        document.getElementById('file').addEventListener('change', function (e) {
            file = e.target.files[0];
            //采用时间戳重命名
            var last=file.name.substr(file.name.lastIndexOf("."),file.name.length)
            var fileName=Date.parse(new Date()) + last;
            client.multipartUpload(fileName, file, {}).then(function(res) {   //参数fileName为图片名称，参数file为图片
                //上传成功后的图片地址
                  var fileUrl = res.url ? res.url : 'http://'+ res.bucket + '.oss-cn-beijing.aliyuncs.com/' + res.name;
                  console.log(fileUrl)  
                  //上传成功
                  var picture=document.createElement("img");
                  picture.setAttribute("class","upDateImg")
                  picture.src=fileUrl
                  $("#imgBox").append(picture);
                  //删除
                  $("img").on("click",function(){
                      console.log(this)
                      $(this).remove()
                  })
            }, function() {
              console.log('上传文件失败','warning');
            })
        }); 
    </script>
</html>

转载于:https://www.cnblogs.com/dreamstartplace/p/9142088.html