Question

Index.html

<body>
<img id="userThumbs" style="width: 400; height: 286; background-color: antiquewhite;"/>
</body>

UploadThumbnail.html

<form method="POST" id="uploadForm" enctype="multipart/form-data" >
<div class="thumbbrowse-btn">Browse<input type="file" name="file" id="fileThumbnail" accept=".PNG"></div>

<div class="submit-btn-wrapper">
<button type="button" class="thumbsubmit-btn" onclick="uploadThumb()">Submit</button>
</div>

<progress value="0" max="100" id="uploader">0%</progress>

</form>

Script.js

$("#fileThumbnail").on("change", function(event) {
selectedFile = event.target.files[0];
});

function uploadThumb() {

var filename = selectedFile.name;
var storageRef = firebase.storage().ref('/Thumbs/' + filename);
var uploadThumb = storageRef.put(selectedFile);

uploadThumb.on('state_changed', function progress(snapshot){

var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;

}, function(error) {

}, function () {
//Retrieve image//    
storageRef.child('/Thumbs/' + filename).getDownloadURL().then(function(url) {

var img = document.getElementById('userThumbs');
img.src = url;

});

window.location.href = "index.html";

});
}

我有两页：

Index.html 页面（显示上载的图像）
UploadThumbnail.html 页面（将图像上传到Firebase存储）

我可以使用 Script.js 中的代码将图像成功上传到存储中，并且也可以重定向，但不能在 Index的标记上显示它们。 html 如何显示上传的图像。谢谢。

如何使用Firebase上传图像并显示在另一页面上

0 个答案: