我们已宣布
查看 Amazon S3 桶中的照片：完整代码
本部分包含适用于可查看 Amazon S3 桶中照片的示例的完整 HTML 和 JavaScript 代码。有关详细信息和先决条件，请参阅父部分。
示例的 HTML：
<!DOCTYPE html>
<html>
<head>
<!-- **DO THIS**: -->
<!-- Replace SDK_VERSION_NUMBER with the current SDK version number -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
<script src="./PhotoViewer.js"></script>
<script>listAlbums();</script>
</head>
<body>
<h1>Photo Album Viewer</h1>
<div id="viewer" />
</body>
</html>
此示例代码可在 GitHub 上的此处
示例的浏览器脚本代码：
//
// Data constructs and initialization.
//
// **DO THIS**:
// Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";
// **DO THIS**:
// Replace this block of code with the sample code located at:
// Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: "IDENTITY_POOL_ID",
});
// Create a new service object
var s3 = new AWS.S3({
apiVersion: "2006-03-01",
params: { Bucket: albumBucketName },
});
// A utility function to create HTML.
function getHtml(template) {
return template.join("\n");
}
//
// Functions
//
// List the photo albums that exist in the bucket.
function listAlbums() {
s3.listObjects({ Delimiter: "/" }, function (err, data) {
if (err) {
return alert("There was an error listing your albums: " + err.message);
} else {
var albums = data.CommonPrefixes.map(function (commonPrefix) {
var prefix = commonPrefix.Prefix;
var albumName = decodeURIComponent(prefix.replace("/", ""));
return getHtml([
"<li>",
'<button style="margin:5px;" onclick="viewAlbum(\'' +
albumName +
"')\">",
albumName,
"</button>",
"</li>",
]);
});
var message = albums.length
? getHtml(["<p>Click on an album name to view it.</p>"])
: "<p>You do not have any albums. Please Create album.";
var htmlTemplate = [
"<h2>Albums</h2>",
message,
"<ul>",
getHtml(albums),
"</ul>",
];
document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
}
});
}
// Show the photos that exist in an album.
function viewAlbum(albumName) {
var albumPhotosKey = encodeURIComponent(albumName) + "/";
s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
if (err) {
return alert("There was an error viewing your album: " + err.message);
}
// 'this' references the AWS.Request instance that represents the response
var href = this.request.httpRequest.endpoint.href;
var bucketUrl = href + albumBucketName + "/";
var photos = data.Contents.map(function (photo) {
var photoKey = photo.Key;
var photoUrl = bucketUrl + encodeURIComponent(photoKey);
return getHtml([
"<span>",
"<div>",
"<br/>",
'<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
"</div>",
"<div>",
"<span>",
photoKey.replace(albumPhotosKey, ""),
"</span>",
"</div>",
"</span>",
]);
});
var message = photos.length
? "<p>The following photos are present.</p>"
: "<p>There are no photos in this album.</p>";
var htmlTemplate = [
"<div>",
'<button onclick="listAlbums()">',
"Back To Albums",
"</button>",
"</div>",
"<h2>",
"Album: " + albumName,
"</h2>",
message,
"<div>",
getHtml(photos),
"</div>",
"<h2>",
"End of Album: " + albumName,
"</h2>",
"<div>",
'<button onclick="listAlbums()">',
"Back To Albums",
"</button>",
"</div>",
];
document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
document
.getElementsByTagName("img")[0]
.setAttribute("style", "display:none;");
});
}
此示例代码可在 GitHub 上的此处
