我决定将Google Friendly Pix演示应用程序用于我的目的，因为我非常喜欢布局，我只是想我可以修改.js和.html文件。我花了整晚尝试不同的代码，但我可能无法正确推送数据，我设置了一个简单的表单来测试我的功能。 （根据期刊DIV）
Friendly Pix app：https://github.com/firebase/friendlypix
index.html：
<!doctype html>
<!--
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Share your pics. Powered by Firebase.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friendly Pix</title>
<link rel="shortcut icon" href="/images/favicon.png">
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Web Application Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Add to home screen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Friendly Pix">
<meta name="theme-color" content="#303F9F">
<link rel="icon" sizes="192x192" href="/images/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="/images/touch/touch-icon-128x128.png">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="apple-touch-icon" href="/images/touch/touch-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" href="/images/touch/touch-icon-180x180.png">
<meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
<!-- Tile icon for Win8 -->
<meta name="msapplication-TileImage" content="/images/touch/touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<meta name="msapplication-navbutton-color" content="#303F9F">
<!-- Material Design Lite -->
<link rel="stylesheet" href="/libs/material-design-lite/material.min.css">
<script defer src="/libs/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Firebase UI Auth -->
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.css" />
<!-- Styling -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,300">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amaranth:700">
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<!-- Theatre mode viewer -->
<div class="fp-theatre"><img class="fp-fullpic"></div>
<!-- Splash screen -->
<section id="page-splash">
<h3 class="fp-logo"><i class="material-icons">photo</i> Friendly Pix</h3>
<div class="fp-caption">The friendliest way to share your pics</div>
<div class="fp-signed-out-only fp-initially-hidden">
<div id="firebaseui-auth-container" class="fp-signed-out-only fp-initially-hidden"></div>
<a class="fp-skip" href="/feed">skip sign in</a>
</div>
</section>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header section containing logo and menu -->
<header class="fp-header mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
<div class="mdl-layout__header-row fp-titlebar">
<!-- Logo -->
<h3 class="fp-logo"><a href="/feed"><i class="material-icons">photo</i> Friendly Pix</a></h3>
<div class="mdl-layout-spacer"></div>
<!-- Search bar -->
<div class="fp-searchcontainer mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="searchQuery">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="searchQuery">
<label class="mdl-textfield__label" for="searchQuery">Enter your query...</label>
</div>
<div id="fp-searchResults" class="mdl-card mdl-shadow--2dp"></div>
</div>
<!-- Signed-in User Info -->
<div class="mdl-cell--hide-phone">
<a href="/"><button class="fp-sign-in-button fp-signed-out-only mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button></a>
<div class="fp-signed-in-user-container mdl-cell--hide-phone fp-signed-in-only">
<a class="fp-usernamelink mdl-button mdl-js-button">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
</div>
<!-- Drop Down Menu -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-cell--hide-phone" id="fp-menu">
<i class="material-icons">more_vert</i>
</button>
<ul class="fp-menu-list mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="fp-menu">
<a href="/about">
<li class="mdl-menu__item"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</li>
</a>
<li class="fp-sign-out mdl-menu__item fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign out</li>
</ul>
</div>
<!-- Navigation Bar -->
<div class="fp-tab mdl-layout__header-row mdl-cell--hide-phone mdl-color--light-blue-600">
<div class="mdl-tab">
<a href="/" id="fp-menu-home" class="mdl-layout__tab fp-signed-in-only is-active mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">home</i> Home</a>
<a href="/feed" id="fp-menu-feed" class="mdl-layout__tab mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">trending_up</i> Feed</a>
<a href="/journal" id="journal" class="mdl-layout__tab mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">trending_up</i> Journal</a>
<input id="fp-mediacapture" type="file" accept="image/*;capture=camera">
<button class="fp-signed-in-only mdl-button mdl-js-button mdl-button--fab mdl-cell--hide-tablet mdl-color--amber-400 mdl-shadow--4dp mdl-js-ripple-effect" id="add">
<i class="material-icons">file_upload</i>
</button>
</div>
</div>
<button class="fp-signed-in-only mdl-cell--hide-desktop mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color--amber-400 mdl-shadow--4dp" id="add-floating">
<i class="material-icons">photo_camera</i>
</button>
</header>
<!-- Drawer menu -->
<div class="mdl-cell--hide-desktop mdl-cell--hide-tablet mdl-layout__drawer">
<a href="/" class="fp-signed-out-only"><button class="fp-sign-in-button mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button></a>
<div class="fp-signed-in-user-container mdl-color--light-blue-700 fp-signed-in-only">
<a class="fp-usernamelink">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active fp-signed-in-only" href="/"><i class="material-icons">home</i> Home</a>
<a class="mdl-navigation__link" href="/feed"><i class="material-icons">trending_up</i> Feed</a>
<hr />
<a class="mdl-navigation__link" href="/about"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</a>
<hr class="fp-signed-in-only"/>
<a class="fp-sign-out mdl-navigation__link fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign Out</a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<!-- Show a feed of posts -->
<section id="page-feed" class="mdl-grid fp-content" style="display: none;">
<div class="fp-new-posts-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Show new posts...
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts fp-help mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet
mdl-cell--8-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts!</p>
<p>
Use the <strong><i class="material-icons">search</i> search bar</strong> to find people you know and have
a look at the <a href="/feed"><i class="material-icons">trending_up</i> feed</a> to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i> like and comment their posts!</p>
</div>
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Show a single post with comments -->
<section id="page-post" class="mdl-grid fp-content" style="display: none;">
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid"></div>
</section>
<!-- Journal page -->
<!-- Journal page -->
<!-- Journal page -->
<section id="page-journal" class="mdl-grid fp-content" style="display: none;">
<form id="uploadJournal" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="testInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Test message...</label>
</div>
<br />
<button type="submit" class="fp-journal mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Upload this text!
</button>
</form>
</section>
<!-- About & Contact page -->
<section id="page-about" class="mdl-grid fp-content" style="display: none;">
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">info</i>
<div>
<p>THIS IS BULL <a href="https://firebase.google.com">Firebase Platform</a>.</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts in your <a href="/"><i class="material-icons">home</i>home</a>!</p>
<p>
Use the <strong><i class="material-icons">search</i>search bar</strong> to find people you know and have
a look at the <a href="/feed"><i class="material-icons">trending_up</i>feed</a> to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i>like and comment their posts!</p>
<p>
Share your pics with your friends using the <i class="material-icons">file_upload</i>or <i class="material-icons">photo_camera</i>buttons.
</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">contacts</i>
<div>
<p>Feel free to file issues on our <a href="https://github.com/firebase/friendlypix">GitHub repo</a>.</p>
</div>
</div>
</div>
</section>
<!-- User Profile page -->
<section id="page-user-info" class="mdl-grid fp-content" style="display: none;">
<div class="fp-user-container mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<div class="fp-user-avatar"></div>
<div class="fp-name-follow-container mdl-cell mdl-cell--5-col">
<div class="fp-user-username"></div>
<div class="fp-signed-in-only">
<label class="fp-follow mdl-switch mdl-js-switch mdl-js-ripple-effect" for="follow">
<input type="checkbox" id="follow" class="mdl-switch__input" value="true">
<span class="mdl-switch__label">Follow</span>
</label>
<label class="fp-notifications mdl-switch mdl-js-switch mdl-js-ripple-effect" for="notifications">
<input type="checkbox" id="notifications" class="mdl-switch__input" value="true">
<span class="mdl-switch__label">Enable Notifications</span>
</label>
</div>
<div class="fp-user-detail-container">
<div class="fp-user-detail"><span class="fp-user-nbposts">0</span> posts</div>
<div class="fp-user-detail"><span class="fp-user-nbfollowers">0</span> followers</div>
<div class="fp-user-detail fp-user-nbfollowing-container"><span class="fp-user-nbfollowing">0</span> following</div>
</div>
</div>
</div>
<div class="fp-user-following mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<button class="fp-close-following mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_less</i>
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
No posts yet.
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Post new pic page -->
<section id="page-add" class="mdl-grid fp-content" style="display: none;">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="fp-addcontainer mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
<div class="fp-overlay">
<i class="material-icons">hourglass_full</i>
</div>
<img id="newPictureContainer" src="">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<form id="uploadPicForm" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="imageCaptionInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Image caption...</label>
</div>
<br />
<button type="submit" class="fp-upload mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Upload this pic!
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Toast -->
<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text"></div>
<button type="button" class="mdl-snackbar__action"></button>
</div>
</main>
</div>
<!-- Page.js -->
<script src="/libs/page/page.js"></script>
<!-- jQuery -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<!-- Latinize -->
<script src="/libs/latinize/latinize.js"></script>
<!-- SweetAlert -->
<script src="/libs/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/libs/sweetalert/dist/sweetalert.css">
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey:
authDomain:
databaseURL:
storageBucket:
messagingSenderId:
};
firebase.initializeApp(config);
</script>
<!-- Firebase UI for Auth -->
<script src="https://www.gstatic.com/firebasejs/ui/live/1.0/firebase-ui-auth.js"></script>
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
'signInFlow': 'popup',
'signInOptions': [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
]
};
var firebaseUi = new firebaseui.auth.AuthUI(firebase.auth());
</script>
<!-- Friendly Pix ES5 scripts
<script src="/scripts-es5/utils.js"></script>
<script src="/scripts-es5/firebase.js"></script>
<script src="/scripts-es5/auth.js"></script>
<script src="/scripts-es5/search.js"></script>
<script src="/scripts-es5/uploader.js"></script>
<script src="/scripts-es5/messaging.js"></script>
<script src="/scripts-es5/userpage.js"></script>
<script src="/scripts-es5/post.js"></script>
<script src="/scripts-es5/feed.js"></script>
<script src="/scripts-es5/routing.js"></script> -->
<!-- Friendly Pix ES2015 scripts -->
<script src="/scripts/utils.js"></script>
<script src="/scripts/firebase.js"></script>
<script src="/scripts/auth.js"></script>
<script src="/scripts/search.js"></script>
<script src="/scripts/uploader.js"></script>
<script src="/scripts/messaging.js"></script>
<script src="/scripts/userpage.js"></script>
<script src="/scripts/post.js"></script>
<script src="/scripts/feed.js"></script>
<script src="/scripts/routing.js"></script>
<script src="/scripts/journal.js"></script>
</body>
</html>
我修改了图片上传方法，因为这最接近我的需要：
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
window.friendlyPix = window.friendlyPix || {};
/**
* Handles uploads of new pics.
*/
friendlyPix.Journal = class {
/**
* Inititializes the pics Journal/post creator.
* @constructor
*/
constructor() {
// Firebase SDK
this.database = firebase.database();
this.auth = firebase.auth();
this.storage = firebase.storage();
this.addPolyfills();
$(document).ready(() => {
// DOM Elements
this.addButton = $('#journal');
//this.addButtonFloating = $('#add-floating');
this.uploadButton = $('.fp-journal');
this.testInput = $('#testInput');
this.uploadJournal = $('#uploadJournal');
this.toast = $('.mdl-js-snackbar');
// Event bindings
//this.addButton.click(() => this.initiatePictureCapture());
// this.addButtonFloating.click(() => this.initiatePictureCapture());
//this.imageInput.change(e => this.readPicture(e));
this.uploadJournal.submit(e => this.uploadPic(e));
this.testInput.keyup(() => this.uploadButton.prop('disabled', !this.testInput.val()));
});
}
// Adds polyfills required for the Journal. REQUIRED FOR FUNCTION TO POST FOR SOME REASON
addPolyfills() {
// Polyfill for canvas.toBlob().
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function(callback, type, quality) {
var binStr = atob(this.toDataURL(type, quality).split(',')[1]);
var len = binStr.length;
var arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}
}
/**
* Uploads the pic to Firebase Storage and add a new post into the Firebase Database.
*/
uploadPic(e) {
e.preventDefault();
alert("I am an alert boxxxxxxx!");
var myRootRef = new Firebase('https://xxx.firebaseio.com/');
var collectionRef = myRootRef.child('collection');
var pushRef = collectionRef.push();
pushRef.set('item1');
var imageCaption = this.testInput.val();
//alert(imageCaption);
}
/**
* Clear the uploader.
*/
clear() {
this.currentFile = null;
// Cancel all Firebase listeners.
friendlyPix.firebase.cancelAllSubscriptions();
// Clear previously displayed pic.
this.newPictureContainer.attr('src', '');
// Clear the text field.
friendlyPix.MaterialUtils.clearTextField(this.testInput[0]);
// Make sure UI is not disabled.
this.disableUploadUi(false);
}
};
friendlyPix.journal = new friendlyPix.Journal();
我也尝试过：
uploadPic(e) {
e.preventDefault();
var messagesRef = new Firebase('xxx.firebaseio.com/');
var imageCaption = this.testInput.val();
//alert("I am an alert boxxxxxxx!");
//alert(imageCaption);
// Save data to firebase
messagesRef.push({fieldName:'testInput', text:imageCaption});
messageField.value = '';
}
我为巨大的代码块道歉，希望有人能帮忙！我尝试过在Google上找到的所有方法。