teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問PHP/mysql に保存した画像データ　が表示されない

編集履歴

質問編集履歴

2

画像がうまく挿入できていなかったため、挿入しました

2021/03/30 22:03

投稿

mmen7
mmen7

スコア1

test CHANGED
File without changes
test CHANGED
@@ -18,468 +18,464 @@
18
18
 
19
19
 
20
20
 
21
+ ![検証画面](211a245e4062b704cb1ec0393be317a5.png)
22
+
23
+ ![![イメージ説明](e92e5c5ac5f62d8d8978913c93a20fe0.png)](6df0c90cc31f8ed1e0aa066a5df14514.png)
24
+
25
+
26
+
27
+
28
+
29
+ ### 該当のソースコード
30
+
31
+ ```php
32
+
33
+ <?php
34
+
35
+ require_once "./dbc.php";
36
+
37
+ $files = getAllFile();
38
+
39
+
40
+
41
+ ?>
42
+
43
+ <!-- ①フォームの説明 -->
44
+
45
+ <!-- ②$_FILEの確認 -->
46
+
47
+ <!-- ③バリデーション -->
48
+
49
+ <!DOCTYPE html>
50
+
51
+ <html lang="ja">
52
+
53
+ <head>
54
+
55
+ <meta charset="UTF-8" />
56
+
57
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
58
+
59
+ <title>アップロードフォーム</title>
60
+
61
+ </head>
62
+
63
+ <style>
64
+
65
+ body {
66
+
67
+ padding: 30px;
68
+
69
+ margin: 0 auto;
70
+
71
+ width: 50%;
72
+
73
+ }
74
+
75
+ textarea {
76
+
77
+ width: 98%;
78
+
79
+ height: 60px;
80
+
81
+ }
82
+
83
+ .file-up {
84
+
85
+ margin-bottom: 10px;
86
+
87
+ }
88
+
89
+ .submit {
90
+
91
+ text-align: right;
92
+
93
+ }
94
+
95
+ .btn {
96
+
97
+ display: inline-block;
98
+
99
+ border-radius: 3px;
100
+
101
+ font-size: 18px;
102
+
103
+ background: #67c5ff;
104
+
105
+ border: 2px solid #67c5ff;
106
+
107
+ padding: 5px 10px;
108
+
109
+ color: #fff;
110
+
111
+ cursor: pointer;
112
+
113
+ }
114
+
115
+ </style>
116
+
117
+
118
+
119
+
120
+
121
+ <body>
122
+
123
+ <form enctype="multipart/form-data" action="./file_upload.php" method="POST">
124
+
125
+ <div class="file-up">
126
+
127
+ <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
128
+
129
+ <input name="img" type="file" accept="image/*" />
130
+
131
+ </div>
132
+
133
+ <div>
134
+
135
+ <textarea
136
+
137
+ name="caption"
138
+
139
+ placeholder="キャプション（140文字以下）"
140
+
141
+ id="caption"
142
+
143
+ ></textarea>
144
+
145
+ </div>
146
+
147
+ <div class="submit">
148
+
149
+ <input type="submit" value="送信" class="btn" />
150
+
151
+ </div>
152
+
153
+ </form>
154
+
155
+ <div>
156
+
157
+ <?php foreach($files as $file): ?>
158
+
159
+ <img src = "<?php echo "{$file['file_path']}" ?>" alt = "">
160
+
161
+ <p><?php echo "{$file['description']}" ?></p>
162
+
163
+ <?php endforeach; ?>
164
+
165
+ </div>
166
+
167
+ </body>
168
+
169
+ </html>
170
+
171
+
172
+
21
173
  ```
22
174
 
175
+ ```php
176
+
23
- エラーメッセージ
177
+ <?php
178
+
24
-
179
+ // ①ファイルの保存
180
+
181
+ // ②DB接続
182
+
183
+ // ③DBへの保存
184
+
185
+ require_once "./dbc.php";
186
+
187
+
188
+
189
+ // ファイル関連の取得
190
+
191
+ $file = $_FILES['img'];
192
+
193
+ $filename = basename($file['name']);
194
+
195
+ $tmp_path = $file['tmp_name'];
196
+
197
+ $file_err = $file['error'];
198
+
199
+ $filesize = $file['size'];
200
+
201
+ $upload_dir = 'Applications/MAMP/htdocs/final_kadai/images/';
202
+
203
+ $save_filename = date('YmdHis'). $filename;
204
+
205
+ $err_msgs = array();
206
+
207
+ $save_path = $upload_dir . $save_filename;
208
+
209
+
210
+
211
+ // 取得情報の確認
212
+
213
+ // var_dump($file);
214
+
215
+
216
+
217
+ // キャプションを取得
218
+
219
+ $caption = filter_input(INPUT_POST,'caption',
220
+
221
+ FILTER_SANITIZE_SPECIAL_CHARS);
222
+
223
+
224
+
225
+ // キャプションのバリデーション
226
+
227
+ // 未入力
228
+
229
+ if(empty($caption)){
230
+
231
+ echo 'キャプションを入力してください';
232
+
233
+ echo '<br>';
234
+
235
+
236
+
25
- エラー
237
+ }
238
+
239
+
240
+
26
-
241
+ // 文字数
242
+
243
+ if(strlen($caption) > 140){
244
+
245
+ array_push($err_msgs,'キャプションは140字以内で入力してください');
246
+
247
+ }
248
+
249
+
250
+
251
+ // ファイルのバリデーション
252
+
253
+ // ファイルサイズが　１MB未満か
254
+
255
+ if($filesize > 1048576 || $file_err == 2){
256
+
257
+ array_push($err_msgs,'ファイルサイズは1MB未満にしてください');
258
+
259
+ }
260
+
261
+
262
+
263
+ // 拡張子は画像形式か
264
+
265
+ $allow_ext = array('jpg','jpeg','png');
266
+
267
+ $file_ext = pathinfo($filename,PATHINFO_EXTENSION);
268
+
269
+
270
+
27
- ![検証画面でのエラー](1d2c1ba7444ba1599f68ae64846f88e4.png)
271
+ if(!in_array(strtolower($file_ext),$allow_ext)){
272
+
273
+ array_push($err_msgs,'画像ファイルを添付してください');
274
+
275
+
276
+
277
+ }
278
+
279
+ if(count($err_msgs) === 0){
280
+
281
+
282
+
283
+
284
+
285
+ // ファイルはあるか
286
+
287
+ if(is_uploaded_file($tmp_path)){
288
+
289
+ if(move_uploaded_file($tmp_path,$upload_dir.
290
+
291
+ $save_filename)){
292
+
293
+ echo $filename . 'を'. $upload_dir.'へアップしました
294
+
295
+ ';
296
+
297
+ // DBに保存（ファイル名、ファイルパス、キャプション)
298
+
299
+ $result = fileSave($filename,$save_path,
300
+
301
+ $caption);
302
+
303
+ if($result){
304
+
305
+ echo "データベースに保存しました!";
306
+
307
+ }else{
308
+
309
+ echo "データベースへの保存が失敗しました";
310
+
311
+ }
312
+
313
+ }else{
314
+
315
+ echo 'ファイルが保存できませんでした';
316
+
317
+ }
318
+
319
+ }else{
320
+
321
+ echo 'ファイルが選択されていません';
322
+
323
+ echo '<br>';
324
+
325
+ }
326
+
327
+ }else{
328
+
329
+ foreach ($$err_msgs as $msg){
330
+
331
+ echo $msg;
332
+
333
+ echo '<br>';
334
+
335
+ }
336
+
337
+ }
338
+
339
+
340
+
341
+ ?>
342
+
343
+ <a href = "./upload_form.php">戻る</a>
344
+
345
+
346
+
347
+
28
348
 
29
349
  ```
30
350
 
31
351
 
32
352
 
33
- ### 該当のソースコード
34
-
35
353
  ```php
36
354
 
37
355
  <?php
38
356
 
39
- require_once "./dbc.php";
40
-
41
- $files = getAllFile();
42
-
43
-
44
-
45
- ?>
46
-
47
- <!-- ①フォームの説明 -->
48
-
49
- <!-- ②$_FILEの確認 -->
50
-
51
- <!-- ③バリデーション -->
52
-
53
- <!DOCTYPE html>
54
-
55
- <html lang="ja">
56
-
57
- <head>
58
-
59
- <meta charset="UTF-8" />
60
-
61
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
62
-
63
- <title>アップロードフォーム</title>
64
-
65
- </head>
66
-
67
- <style>
68
-
69
- body {
70
-
71
- padding: 30px;
72
-
73
- margin: 0 auto;
74
-
75
- width: 50%;
76
-
77
- }
78
-
79
- textarea {
80
-
81
- width: 98%;
82
-
83
- height: 60px;
84
-
85
- }
86
-
87
- .file-up {
88
-
89
- margin-bottom: 10px;
90
-
91
- }
92
-
93
- .submit {
94
-
95
- text-align: right;
96
-
97
- }
98
-
99
- .btn {
100
-
101
- display: inline-block;
102
-
103
- border-radius: 3px;
104
-
105
- font-size: 18px;
106
-
107
- background: #67c5ff;
108
-
109
- border: 2px solid #67c5ff;
110
-
111
- padding: 5px 10px;
112
-
113
- color: #fff;
114
-
115
- cursor: pointer;
116
-
117
- }
118
-
119
- </style>
120
-
121
-
122
-
123
-
124
-
125
- <body>
126
-
127
- <form enctype="multipart/form-data" action="./file_upload.php" method="POST">
128
-
129
- <div class="file-up">
130
-
131
- <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
132
-
133
- <input name="img" type="file" accept="image/*" />
134
-
135
- </div>
136
-
137
- <div>
138
-
139
- <textarea
140
-
141
- name="caption"
142
-
143
- placeholder="キャプション（140文字以下）"
144
-
145
- id="caption"
146
-
147
- ></textarea>
148
-
149
- </div>
150
-
151
- <div class="submit">
152
-
153
- <input type="submit" value="送信" class="btn" />
154
-
155
- </div>
156
-
157
- </form>
158
-
159
- <div>
160
-
161
- <?php foreach($files as $file): ?>
162
-
163
- <img src = "<?php echo "{$file['file_path']}" ?>" alt = "">
164
-
165
- <p><?php echo "{$file['description']}" ?></p>
166
-
167
- <?php endforeach; ?>
168
-
169
- </div>
170
-
171
- </body>
172
-
173
- </html>
357
+ function dbc()
358
+
359
+ {
360
+
361
+ $host ="localhost";
362
+
363
+ $dbname = "f_db";
364
+
365
+ $user = "root";
366
+
367
+ $pass ="root";
368
+
369
+ $dns = "mysql:host=$host;
370
+
371
+ dbname=$dbname;charset = utf8";
372
+
373
+ $dbh = new PDO($dns, $user, $pass);
374
+
375
+ var_dump($dbh);
376
+
377
+ try{
378
+
379
+ $pdo = new PDO($dns, $user, $pass,
380
+
381
+ [
382
+
383
+ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
384
+
385
+ PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
386
+
387
+ ]
388
+
389
+ );
390
+
391
+ // echo "成功";
392
+
393
+ return $pdo;
394
+
395
+ }catch(PDOException $e){
396
+
397
+ exit('DbConnectError:'.$e->getMessage());
398
+
399
+ }
400
+
401
+ }
402
+
403
+ // ファイルデータを保存
404
+
405
+ // @parem string $filename ファイル名
406
+
407
+ // @parem string $save_path 保存先のパス
408
+
409
+ // @parem string $caption 投稿の説明
410
+
411
+ // @return bool $result
412
+
413
+ // データ登録sql作成
414
+
415
+ function fileSave($filename,$save_path,$caption)
416
+
417
+ {
418
+
419
+ $result = False;
420
+
421
+ $sql = "INSERT INTO file_table (file_name, file_path,
422
+
423
+ description ) VALUE (?,?,?)";
424
+
425
+ try{
426
+
427
+ $stmt = dbc()->prepare($sql);
428
+
429
+ $stmt->bindValue(1,$filename);
430
+
431
+ $stmt->bindValue(2,$save_path);
432
+
433
+ $stmt->bindValue(3,$caption);
434
+
435
+ $result = $stmt->execute();
436
+
437
+ return $result;
438
+
439
+ } catch(\Exception $e) {
440
+
441
+ echo $e->getMessage();
442
+
443
+ }
444
+
445
+ }
446
+
447
+
448
+
449
+ // ファイルデータを取得
450
+
451
+ // 　return array　// $fileData
452
+
453
+ // データ登録sql作成
454
+
455
+ function getAllFile()
456
+
457
+ {
458
+
459
+ $sql = "SELECT * FROM file_table";
460
+
461
+
462
+
463
+ $fileData = dbc()->query($sql);
464
+
465
+
466
+
467
+ return $fileData;
468
+
469
+ }
470
+
471
+
472
+
473
+ getAllFile();
174
474
 
175
475
 
176
476
 
177
477
  ```
178
478
 
179
- ```php
180
-
181
- <?php
182
-
183
- // ①ファイルの保存
184
-
185
- // ②DB接続
186
-
187
- // ③DBへの保存
188
-
189
- require_once "./dbc.php";
190
-
191
-
192
-
193
- // ファイル関連の取得
194
-
195
- $file = $_FILES['img'];
196
-
197
- $filename = basename($file['name']);
198
-
199
- $tmp_path = $file['tmp_name'];
200
-
201
- $file_err = $file['error'];
202
-
203
- $filesize = $file['size'];
204
-
205
- $upload_dir = 'Applications/MAMP/htdocs/final_kadai/images/';
206
-
207
- $save_filename = date('YmdHis'). $filename;
208
-
209
- $err_msgs = array();
210
-
211
- $save_path = $upload_dir . $save_filename;
212
-
213
-
214
-
215
- // 取得情報の確認
216
-
217
- // var_dump($file);
218
-
219
-
220
-
221
- // キャプションを取得
222
-
223
- $caption = filter_input(INPUT_POST,'caption',
224
-
225
- FILTER_SANITIZE_SPECIAL_CHARS);
226
-
227
-
228
-
229
- // キャプションのバリデーション
230
-
231
- // 未入力
232
-
233
- if(empty($caption)){
234
-
235
- echo 'キャプションを入力してください';
236
-
237
- echo '<br>';
238
-
239
-
240
-
241
- }
242
-
243
-
244
-
245
- // 文字数
246
-
247
- if(strlen($caption) > 140){
248
-
249
- array_push($err_msgs,'キャプションは140字以内で入力してください');
250
-
251
- }
252
-
253
-
254
-
255
- // ファイルのバリデーション
256
-
257
- // ファイルサイズが　１MB未満か
258
-
259
- if($filesize > 1048576 || $file_err == 2){
260
-
261
- array_push($err_msgs,'ファイルサイズは1MB未満にしてください');
262
-
263
- }
264
-
265
-
266
-
267
- // 拡張子は画像形式か
268
-
269
- $allow_ext = array('jpg','jpeg','png');
270
-
271
- $file_ext = pathinfo($filename,PATHINFO_EXTENSION);
272
-
273
-
274
-
275
- if(!in_array(strtolower($file_ext),$allow_ext)){
276
-
277
- array_push($err_msgs,'画像ファイルを添付してください');
278
-
279
-
280
-
281
- }
282
-
283
- if(count($err_msgs) === 0){
284
-
285
-
286
-
287
-
288
-
289
- // ファイルはあるか
290
-
291
- if(is_uploaded_file($tmp_path)){
292
-
293
- if(move_uploaded_file($tmp_path,$upload_dir.
294
-
295
- $save_filename)){
296
-
297
- echo $filename . 'を'. $upload_dir.'へアップしました
298
-
299
- ';
300
-
301
- // DBに保存（ファイル名、ファイルパス、キャプション)
302
-
303
- $result = fileSave($filename,$save_path,
304
-
305
- $caption);
306
-
307
- if($result){
308
-
309
- echo "データベースに保存しました!";
310
-
311
- }else{
312
-
313
- echo "データベースへの保存が失敗しました";
314
-
315
- }
316
-
317
- }else{
318
-
319
- echo 'ファイルが保存できませんでした';
320
-
321
- }
322
-
323
- }else{
324
-
325
- echo 'ファイルが選択されていません';
326
-
327
- echo '<br>';
328
-
329
- }
330
-
331
- }else{
332
-
333
- foreach ($$err_msgs as $msg){
334
-
335
- echo $msg;
336
-
337
- echo '<br>';
338
-
339
- }
340
-
341
- }
342
-
343
-
344
-
345
- ?>
346
-
347
- <a href = "./upload_form.php">戻る</a>
348
-
349
-
350
-
351
-
352
-
353
- ```
354
-
355
-
356
-
357
- ```php
358
-
359
- <?php
360
-
361
- function dbc()
362
-
363
- {
364
-
365
- $host ="localhost";
366
-
367
- $dbname = "f_db";
368
-
369
- $user = "root";
370
-
371
- $pass ="root";
372
-
373
- $dns = "mysql:host=$host;
374
-
375
- dbname=$dbname;charset = utf8";
376
-
377
- $dbh = new PDO($dns, $user, $pass);
378
-
379
- var_dump($dbh);
380
-
381
- try{
382
-
383
- $pdo = new PDO($dns, $user, $pass,
384
-
385
- [
386
-
387
- PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
388
-
389
- PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
390
-
391
- ]
392
-
393
- );
394
-
395
- // echo "成功";
396
-
397
- return $pdo;
398
-
399
- }catch(PDOException $e){
400
-
401
- exit('DbConnectError:'.$e->getMessage());
402
-
403
- }
404
-
405
- }
406
-
407
- // ファイルデータを保存
408
-
409
- // @parem string $filename ファイル名
410
-
411
- // @parem string $save_path 保存先のパス
412
-
413
- // @parem string $caption 投稿の説明
414
-
415
- // @return bool $result
416
-
417
- // データ登録sql作成
418
-
419
- function fileSave($filename,$save_path,$caption)
420
-
421
- {
422
-
423
- $result = False;
424
-
425
- $sql = "INSERT INTO file_table (file_name, file_path,
426
-
427
- description ) VALUE (?,?,?)";
428
-
429
- try{
430
-
431
- $stmt = dbc()->prepare($sql);
432
-
433
- $stmt->bindValue(1,$filename);
434
-
435
- $stmt->bindValue(2,$save_path);
436
-
437
- $stmt->bindValue(3,$caption);
438
-
439
- $result = $stmt->execute();
440
-
441
- return $result;
442
-
443
- } catch(\Exception $e) {
444
-
445
- echo $e->getMessage();
446
-
447
- }
448
-
449
- }
450
-
451
-
452
-
453
- // ファイルデータを取得
454
-
455
- // 　return array　// $fileData
456
-
457
- // データ登録sql作成
458
-
459
- function getAllFile()
460
-
461
- {
462
-
463
- $sql = "SELECT * FROM file_table";
464
-
465
-
466
-
467
- $fileData = dbc()->query($sql);
468
-
469
-
470
-
471
- return $fileData;
472
-
473
- }
474
-
475
-
476
-
477
- getAllFile();
478
-
479
-
480
-
481
- ```
482
-
483
479
  ### 試したこと
484
480
 
485
481
  当初、uploadform.phpの最後、php<>内

1

upload_form.php、file_upload.php、dbc.php のコードを追加しました。まだ質問に稚拙な点がありましたらすみません。

2021/03/30 22:02

投稿

mmen7
mmen7

スコア1

test CHANGED
File without changes
test CHANGED
@@ -32,13 +32,7 @@
32
32
 
33
33
  ### 該当のソースコード
34
34
 
35
- 3件載せます
35
+ ```php
36
-
37
-
38
-
39
- ◆ upload_form.php
40
-
41
-
42
36
 
43
37
  <?php
44
38
 
@@ -180,7 +174,9 @@
180
174
 
181
175
 
182
176
 
177
+ ```
178
+
183
- ◆　file_upload.php
179
+ ```php
184
180
 
185
181
  <?php
186
182
 
@@ -354,11 +350,11 @@
354
350
 
355
351
 
356
352
 
357
- ![イメージ説明](f3448ff1189ce077f8856d0b795e06aa.png)
353
+ ```
358
-
354
+
355
+
356
+
359
- ◆dbc.php
357
+ ```php
360
-
361
-
362
358
 
363
359
  <?php
364
360
 
@@ -482,22 +478,8 @@
482
478
 
483
479
 
484
480
 
485
-
486
-
487
-
488
-
489
-
490
-
491
-
492
-
493
- ```ここに言語名を入力　
494
-
495
- ソースコード
496
-
497
481
  ```
498
482
 
499
-
500
-
501
483
  ### 試したこと
502
484
 
503
485
  当初、uploadform.phpの最後、php<>内