Skip to content

Instantly share code, notes, and snippets.

@Xuanwo

Xuanwo/post-object-anoymous.html

Last active June 15, 2017 20:09
Show Gist options
  • Save Xuanwo/425fa071d4601d39fc5c902a12ab5784 to your computer and use it in GitHub Desktop.
Save Xuanwo/425fa071d4601d39fc5c902a12ab5784 to your computer and use it in GitHub Desktop.
Download ZIP
从浏览器端向 QingStor 对象存储上传文件
Raw
post-object-anoymous.html
<!DOCTYPE html>
<html>
<body>
<h3>Upload</h3>
<form id="upload" action="https://<bucket>.<zone>.qingstor.com" method="POST"
enctype="multipart/form-data">
<span>Click or Drag a File Here to Upload</span>
<input type=hidden name="key" value="<key>" />
<input type=file name="file" />
<input type=submit name="Upload" value="Upload to QingStor" />
</form>
</body>
</html>
Raw
post-object-non-anoymous.html
<!DOCTYPE html>
<html>
<body>
<h3>Upload</h3>
<form id="upload" action="https://<bucket>.<zone>.qingstor.com" method="POST"
enctype="multipart/form-data">
<span>Click or Drag a File Here to Upload</span>
<input type=hidden name="key" value="<key>" />
<input type=hidden name="policy" value="<policy>" />
<input type=hidden name="access_key_id" value="<access_key_id>" />
<input type=hidden name="signature" value="<signature>" />
<input type=file name="file" />
<input type=submit name="Upload" value="Upload to QingStor" />
</form>
</body>
</html>
Raw
put-sdk.html
<!DOCTYPE html>
<html>
<head>
<script src='qingstor-sdk.min.js'></script>
</head>
<body>
<h3>Upload</h3>
<input type="file" onchange="upload()" id="file" name="file" />
<script>
let Config = require('qingstor-sdk').Config
let QingStor = require('qingstor-sdk').QingStor;
let config = new Config('<access_key_id>', '<secret_access_key>');
let bucket = new QingStor(config).Bucket('<bucket>', '<zone>');
function upload() {
let f = document.getElementById("file").files[0];
let reader = new FileReader();
reader.readAsBinaryString(f);
reader.onload = (() => {
bucket.putObject(f.name, {
body: reader.result
});
});
}
</script>
</body>
</html>
Raw
put-signature.html
<!DOCTYPE html>
<html>
<head>
<script src='qingstor-sdk.min.js'></script>
</head>
<body>
<h3>Upload</h3>
<input type="file" onchange="upload()" id="file" name="file" />
<script>
let Config = require('qingstor-sdk').Config
let QingStor = require('qingstor-sdk').QingStor;
let config = new Config('not_need', 'not_need');
let bucket = new QingStor(config).Bucket('<bucket>', '<zone>');
function upload() {
let f = document.getElementById("file").files[0];
let reader = new FileReader();
reader.readAsBinaryString(f);
reader.onload = (() => {
let req = bucket.putObjectRequest(f.name, {
"Content-Type": f.type
});
fetch("http://localhost:9000/operation?channel=header", {
method: "POST",
body: JSON.stringify(req.operation),
headers: {
"Content-Type": "application/json; charset=utf-8"
}
})
.then(res => res.json())
.then(res => {
req.operation.headers.Authorization = res.authorization;
req.operation.body = reader.result;
req.send()
})
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment