PHPでファイルアップロードする際に、プログレスバーを表示したい

実装したいこと

PHPでファイルをアップロードする際に、できるだけ簡単にプログレスバーを表示させたいです。

自分で試したこと

こちらの記事を試し、うまくできたのですが、もう少しシンプルに（外部のライブラリを使わずに）実装したいです。それがもし無理なら、ファイルをアップロードした後、フォームのアクション先に飛びたいです。

ソースコード

index.html（フォーム）

HTML
1<html>
2
3<head>
4    <meta charset="utf-8">
5    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
6</head>
7
8<body>
9    <div id="app" class="container">
10        <div class="row" v-if="!uploading">
11            <div class="col-6">
12                <input type="file" name="file" @change="onSelectFile">
13            </div>
14            <div class="col-6">
15                <button type="button" class="btn btn-outline-primary" @click="onSubmit">送信</button>
16            </div>
17        </div>
18        <div class="row" v-else>
19            <div class="col-12 text-center">
20                <!-- プログレスバー（HTML5） -->
21                <progress ref="progress" value="0" max="100"></progress>
22                <br>
23                <span class="text-muted">アップロード中...</span>
24            </div>
25        </div>
26    </div>
27    <!-- Vue -->
28    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
29    <!-- axios -->
30    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
31    <script>
32    new Vue({
33        el: '#app',
34        data: {
35            file: null,
36            uploading: false
37        },
38        methods: {
39            onSubmit() {
40
41                const url = './up.php';
42                let formData = new FormData();
43                formData.append('file', this.file);
44
45                if (this.file === null) {
46
47                    alert('ファイルを選択してください');
48                    return;
49
50                }
51
52                this.uploading = true;
53
54                axios.post(url, formData, { onUploadProgress: this.onUpload })
55                    .then((response) => {
56
57                        // アップロード完了
58                        alert('アップロードが完了しました！');
59                        window.location.href = "./up.php"
60
61                    })
62                    .catch((error) => {
63
64                        // エラーが発生
65                        alert('エラーが発生しました。もう一度やり直してください。');
66
67                    })
68                    .then(() => {
69
70                        this.$refs.progress.value = 0; // プログレスをクリア
71                        this.uploading = false;
72
73                    });
74
75            },
76            onSelectFile(e) { //　ファイル選択時
77
78                const files = e.target.files;
79
80                if (files.length === 0) { // ファイル選択がキャンセルされた時
81
82                    this.file = null;
83                    return;
84
85                }
86
87                this.file = files[0];
88
89            },
90            onUpload(e) {
91
92                // プログレスバーを計算して変更
93                this.$refs.progress.value = Math.floor((e.loaded * 100) / e.total);
94
95            }
96        }
97    });
98    </script>
99</body>
100
101</html>

up.php（アップロード処理）

php
1<?php
2//変数を作成
3$tempfile = $_FILES['file']['tmp_name'];
4$file = $_FILES['file']['name'];
5
6//ランダム文字列作成（同一ファイル名回避）
7$random = chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122)).chr(mt_rand(97, 122));
8
9//リネーム
10$filename = $_SERVER['REQUEST_TIME'].'-'.$random.'.'.pathinfo($file)['extension'];
11
12//データ保存用ディレクトリ
13$directory = './data/';
14
15//アップロード先URL
16$domain = $_SERVER['HTTP_HOST'];
17$url = 'https://'.$domain.'/data/'.$filename;
18
19//データ保存用ディレクトリが存在しなければ作成
20if (file_exists($directory)) {
21    ;
22} else {
23    mkdir($directory);
24}
25
26//ファイルアップロード
27if (is_uploaded_file($tempfile)) {
28    if ( move_uploaded_file($tempfile , $directory.$filename )) {
29    echo '<a href="'.$url.'" target="_blank">'.$file.'</a>をアップロードしました。<br>';
30    echo 'ファイルのURLは<a href="'.$url.'" target="_blank">'.$url.'</a>です。';
31    } else {
32        echo "ファイルをアップロードできません。";
33    }
34} else {
35    echo "ファイルが選択されていません。";
36}
37?>

hentaiman

2021/08/25 03:24

vueは全く分かりませんけど、そのプログレスバーは本当に正しい表示をしていますか？

sekaino_usay

2021/08/25 03:28

途中の進行状況が正しいかどうかはわかりませんが、Maxになり、「アップロードが完了しました！」が表示されると確かにサーバーにファイルはアップロードされています。

hentaiman

2021/08/25 03:32

そうですね　実際のアップロード状況は全く見ておらずにアップロード完了したかどうかだけを書いているだけの普通の処理に見えますそれっぽく見えるだけで良ければajaxでファイルアップロードをし、それが終わったらただのjavascriptで遷移すれば良いだけです location.hrefは分かりますね？

sekaino_usay

2021/08/25 03:36

あ、これそれっぽく見せてるだけだったんですね。笑 location.hrefはわかりますが、それでup.phpに遷移するとファイルが選択されていないことになってしまいます。

hentaiman

2021/08/25 03:53

一番楽なのはqueryパラメーターとしてファイルネームを付与する事です URLの見た目が気になるならファイル名だけをformのpostデータとして用意してsubmitすれば良いだけですファイルを保存用の処理と遷移用の処理は分ける必要がありますけどね

行動規範の内容に同意します

回答1件

ライブラリ使わないとなるとライブラリでやってるようなことを全部自力で実装することになり、シンプルとは程遠いと思います。
jQueryもライブラリですしね。
無理の基準はともかく難易度は高くなります。

ファイルをアップロードした後、フォームのアクション先に飛びたいです。

自力実装との関連性はないと思います。
100%になったことを感知し（フラグなりなんなり）、リダイレクトすれば良いと思います。
submit()でform送信するとファイルも二重に送信することになるのでは？受け取る実装にしなければ良いだけですが、ちょっと無駄。
あとは要件と現在の実装次第なのでなんとも言えません。

投稿2021/08/25 01:59

m.ts10806

総合スコア80861

sekaino_usay

2021/08/25 02:13

回答ありがとうございます。ライブラリを使ったほうがシンプルになるのですね！でしたら使ってみようと思います。おすすめのものはありますか？ソースコード追加しました。今のままだとアップロードが完了したとき、画面はindex.htmlのままになってしまいます。しかしup.phpに画面を遷移し、アップロードされたファイルのURLの表示をさせたいです。どうしたら良いでしょうか。

m.ts10806

2021/08/25 02:18

>アップロードされたファイルのURLの表示をさせたいです。アップロード処理は非同期でPHPでしてるんですよね。　リダイレクトせずともup.phpからのレスポンスにURLを入れて返却値を受け取ったJavaScriptで画面に表示させれば良いのでは？現状の実装だとthenの引数responseに欲しい情報はいってきてそうですけど。

sekaino_usay

2021/08/25 02:45

URLの表示はPHP側で行いたいのですが、いい方法はありますか？

m.ts10806

2021/08/25 02:50

PHPでも結局はhtml出力してるだけですよ。それだけのために別途PHPプログラム書くのはどんどん複雑になっていきます。「可能だけど悪手だからやらない」と言っておきます。 Vue使ってるならなおさらですね。まあひとまずresponseを確認してみてください。「PHPから出力された内容」なので、それを使うことも「PHP側で行う」と言えるかもしれません。。