teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問画像の投稿機能をHTML、Javascriptで実現したい

編集履歴

質問編集履歴

2

コードの変更

2020/05/15 08:29

投稿

predesu
predesu

スコア1

test CHANGED
File without changes
test CHANGED
@@ -10,220 +10,98 @@
10
10
 
11
11
  名前、コメントの欄で記入した内容の登録がチャット形式でできています。
12
12
 
13
+ 画像もfirebase storageにUPできるのは確認できています。
14
+
13
15
 
14
16
 
15
17
  ###解決したい内容
16
18
 
17
- 画像投稿の機能でアップロードは出来るものの、画像をその場に投稿する方法がわかりません。
19
+ 画像投稿をゴールとしているため、storageへのUPされているものをwebサイト上への投稿としたいです。
18
20
 
19
21
 
20
22
 
21
- ###コード(HTML)
23
+ ###画像がfirebase storageにUPされるコード(HTML)
22
24
 
23
25
  <!DOCTYPE html>
24
26
 
25
- <html lang="en">
27
+ <html>
26
28
 
27
- <head>
29
+ <head>
28
30
 
29
- <meta charset="UTF-8">
31
+ <meta charset="utf-8">
30
32
 
31
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
33
+ <meta name="viewport" content="width=device-width, initial-scale=1">
32
34
 
33
- <title>Chat App</title>
35
+ <title>Realtime Database</title>
36
+
37
+ <script defer src="/__/firebase/4.6.1/firebase-app.js"></script>
38
+
39
+ <script defer src="/__/firebase/4.6.1/firebase-storage.js"></script>
40
+
41
+ <script defer src="/__/firebase/init.js"></script>
42
+
43
+ </head>
44
+
45
+ <body>
46
+
47
+ <input type="file" id="file" />
48
+
49
+ <button id="upload" type="button">アップロード</button>
34
50
 
35
51
 
36
52
 
37
- <!-- The core Firebase JS SDK is always required and must be listed first -->
53
+ <script>
38
54
 
39
- <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js"></script>
55
+
40
56
 
41
- <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-auth.js"></script>
57
+ document.getElementById('upload').addEventListener('click', function() {
42
58
 
43
- <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-database.js"></script>
59
+ files = document.getElementById('file').files;
44
60
 
45
- <!-- TODO: Add SDKs for Firebase products that you want to use
61
+ image = files[0];
46
-
47
- https://firebase.google.com/docs/web/setup#available-libraries -->
48
62
 
49
63
 
50
64
 
51
- <script>
65
+ if(files[0].type.indexOf('image') >= 0) {
52
66
 
53
- // Your web app's Firebase configuration
67
+ ref = firebase.storage().ref().child(image.name);
54
68
 
55
- var firebaseConfig = {
69
+ ref.put(image).then(function(snapshot) {
56
70
 
57
- apiKey: "",
71
+ ref.getDownloadURL().then(function(url){
58
72
 
59
- authDomain: "",
73
+ alert('画像をアップロードしました！');
60
74
 
61
- databaseURL: "",
75
+ document.getElementById('image').src = url;
62
76
 
63
- projectId: "",
77
+ });
64
78
 
65
- storageBucket: "",
79
+ });
66
80
 
67
- messagingSenderId: "",
81
+ } else {
68
82
 
69
- appId: ""
83
+ alert('アップロードできるのはjpeg、png、gifの画像だけです');
70
84
 
71
- };
85
+ }
72
86
 
73
- // Initialize Firebase
74
-
75
- firebase.initializeApp(firebaseConfig);
76
-
77
- </script>
87
+ });
78
88
 
79
89
 
80
90
 
81
- <link rel="stylesheet" href="style.css">
91
+ document.getElementById('delete').addEventListener('click', function() {
82
92
 
93
+ ref.delete().then(function(){
83
94
 
95
+ alert('画像を削除しました！');
84
96
 
85
- </head>
97
+ });
86
98
 
99
+ });
87
100
 
101
+
88
102
 
103
+ </script>
89
104
 
90
-
91
-
92
-
93
- <body>
94
-
95
- <h1>チャット</h1>
96
-
97
- <div>
98
-
99
- <div>
100
-
101
- 名前<br><input type="text" id="name">
102
-
103
- </div>
104
-
105
- <br>
106
-
107
- <div>
108
-
109
- コメント<br><textarea id="message" row="10"></textarea><br>
110
-
111
- 画像<form method="post" enctype="multipart/form-data">
112
-
113
- <input type="file" id="example"name="avatar">
114
-
115
- </form>
116
-
117
- <button id="send">送る</button>
118
-
119
- </div>
120
-
121
-
122
-
123
- <hr>
124
-
125
- <div id="output"></div>
126
-
127
- </div>
128
-
129
-
130
-
131
-
132
-
133
- <script src="index.js"></script>
134
-
135
-
136
-
137
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
138
-
139
-
140
-
141
- </body>
105
+ </body>
142
106
 
143
107
  </html>
144
-
145
-
146
-
147
- ###コード(Javascript)
148
-
149
- var database = firebase.database();
150
-
151
- let room = "chat_room";
152
-
153
- const send = document.getElementById("send");
154
-
155
- const name = document.getElementById("name");
156
-
157
- const message = document.getElementById("message");
158
-
159
- const output = document.getElementById("output")
160
-
161
-
162
-
163
-
164
-
165
- //送信処理
166
-
167
- send.addEventListener('click', function() {
168
-
169
- var now = new Date();
170
-
171
- database.ref(room).push({
172
-
173
- name: name.value,
174
-
175
- message: message.value,
176
-
177
- date: now.getFullYear() + '年' + now.getMonth()+ '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMinutes() + '分'
178
-
179
- });
180
-
181
- message.value="";
182
-
183
- name.value="";
184
-
185
- });
186
-
187
-
188
-
189
-
190
-
191
- //受信処理
192
-
193
- database.ref(room).on("child_added", function(data) {
194
-
195
- const v = data.val();
196
-
197
- const k = data.key;
198
-
199
- let str = "";
200
-
201
- str += '<div class="name">名前：'+v.name+'</div>';
202
-
203
- str += '<div class="text">日時：'+v.date+'</div>';
204
-
205
- str += '<div class="text">メッセージ：'+v.message+'</div><hr>';
206
-
207
- output.innerHTML += str;
208
-
209
- });
210
-
211
-
212
-
213
- //画像
214
-
215
- // ファイルデータ
216
-
217
- const file = document.getElementById("example").files[0];
218
-
219
- // フォームデータを作成
220
-
221
- const formData = new FormData();
222
-
223
- // avatarというフィールド名でファイルを追加
224
-
225
- formData.append("avatar", file);
226
-
227
- // アップロード
228
-
229
- fetch(送信先のURL, { method: "POST", body: formData });

1

修正

2020/05/15 08:29

投稿

predesu
predesu

スコア1

test CHANGED
File without changes
test CHANGED
@@ -188,8 +188,6 @@
188
188
 
189
189
 
190
190
 
191
-
192
-
193
191
  //受信処理
194
192
 
195
193
  database.ref(room).on("child_added", function(data) {