腾讯对象储存简单使用
在想怎么用腾讯云的免费50G对象储存，自己用所以不做那么复杂，安全性也没有考虑。
用了两个SDK：cos-js-sdk-v5.js 和 cos-auth.min.js
没写完，仅供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./cos-js-sdk-v5.js"></script>
<script src="./cos-auth.min.js"></script>
<!--<script src="./index.js"></script>-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#regedit {
color: #5cacee;
position: absolute;
right: 15%;
top: 2%;
font-size: 18px;
}
#uploadText {
color: #5cacee;
position: absolute;
right: 20%;
top: 2%;
font-size: 18px;
}
#upload {
width: 30%;
height: 40%;
min-width: 100px;
min-height: 150px;
background-color: white;
border-radius: 10px;
box-shadow: 1px 1px 3px gray;
position: absolute;
top: 1%;
left: 35%;
z-index: 1;
}
#headName {
font-size: 25px;
position: absolute;
left: 10%;
top: 1%;
}
#xhx {
height: 1px;
background-color: gainsboro;
width: 80%;
margin: 50px auto 10px auto
}
#File_synchronization_time {
color: #5cacee;
font-size: 15px;
position: absolute;
left: 45%;
}
#main_head {
background-color: #f5f5f5;
height: 50px;
width: 80%;
margin: 40px auto 0px auto;
border-color: gainsboro;
border-radius: 6px 6px 3px 3px;
border-style: solid;
border-width: 1px;
}
#main_list {
background-color: #ffffff;
height: 40px;
width: 80%;
margin: -2px auto 10px auto;
border-color: gainsboro;
border-radius: 3px 3px 6px 6px;
border-style: solid;
border-width: 1px;
}
#main_position {
margin-left: 20%;
}
.listObject {
float: left;
margin-right: 15%;
margin-top: 1%;
}
.listClass {
background-color: #5CACEE;
width: 100px;
height: 100px;
}
#ulStyle {}
ul {
width: 100%;
left: 6.5%;
list-style: none;
padding: 0px;
margin-top: 40px;
margin: 40px auto 10px auto;
overflow: hidden;
display: block;
}
ul li {
background-color: #ffffff;
height: 40px;
border-color: gainsboro;
border-radius: 3px 3px 6px 6px;
border-style: solid;
border-width: 1px;
cursor: pointer;
}
#fliesList {
width: 100%;
}
</style>
</head>
<script>
var config = {
Bucket: '这里是Bucket',
Region: '这里是Region'
};
var util = {
createFile: function(options) {
var buffer = new ArrayBuffer(options.size || 0);
var arr = new Uint8Array(buffer);
[].forEach.call(arr, function(char, i) {
arr[i] = 0;
});
var opt = {};
options.type && (opt.type = options.type);
var blob = new Blob([buffer], options);
return blob;
}
};
var cos = new COS({
SecretId: '这里是SecretId',
SecretKey: '这里是SecretKey',
});
var listNumber = new Array();
function getBucket() {
cos.getBucket({
Bucket: config.Bucket,
Region: config.Region,
Prefix: '',
}, function(err, data) {
console.log(err || data.Contents);
for(var i = 0; i < data.Contents.length; i++) {
var x = (err || data.Contents[i]['Key'] + "<br>");
listNumber[i] = data.Contents[i]['Key'];
var li = document.createElement("li");
li.innerHTML = listNumber[i];
var ul = document.getElementById("ulStyle");
ul.appendChild(li);
document.getElementsByTagName('li')[i].onclick = function() {
var x = this.innerText
getObjectUrl(x);
}
}
});
}
function getObjectUrl(x) {
var url = cos.getObjectUrl({
Bucket: config.Bucket,
Region: config.Region,
Key: x,
}, function(err, data) {
console.log(err || data.Url);
var Links = err || data.Url;
window.open(Links);
});
}
function putObject() {
var x = document.getElementById("FileName").files
var file = x[0]['name'];
cos.putObject({
Bucket: config.Bucket,
Region: config.Region,
Key: file,
StorageClass: 'STANDARD',
Body: file,
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
console.log(err || data);
});
}
function deleteObject() {
var x = document.getElementById("ObjectDeleteName").value;
alert(x);
cos.deleteObject({
Bucket: config.Bucket,
Region: config.Region,
Key: x
}, function(err, data) {
console.log(err || data);
var x = err || data['statusCode'] + data['headers'] + "<br>";
DeleteState.innerHTML = DeleteState.innerHTML + x;
});
}
window.onload = function() {
getBucket();
}
</script>
<script>
$(document).ready(function() {
$("#uploadText").click(function() {
alert("aaa");
});
});
</script>
<body>
<header>
<div id="headName"><em>网络文件传输系统</em></div>
<div id="uploadText">上传</div>
<div id="upload">
<input type="file" id="FileName"/>
<button onclick="putObject()">上传</button>
</div>
<div id="regedit">刷新</div>
<div id="xhx"></div>
<div id="File_synchronization_time">文件同步时间：</div>
<div id="Time"></div>
</header>
<div id="main_head">
</div>
<div id="main_list">
<div id="main_position">
<div class="listObject">文件名</div>
<div class="listObject">创建日期</div>
<div class="listObject">大小</div>
<div class="listObject">操作</div>
</div>
<div id="fliesList">
<ul id="ulStyle"></ul>
</div>
</body>
</html>
效果是这样的
