PHPファイル「アップロード中」画面を表示させるには

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
PHPでファイルをアップロードするプログラムを作っています。
ファイルアップロード中に、ボタンがロックされ「現在アップロード中です」のような画面を表示するには
どうすればよいでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

php
1<form enctype="multipart/form-data" method="post">
2    <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
3    <input name="file" type="file">
4    <input type="submit" name="_upload" value="アップロード">
5    </form>
6
7    <?php
8    //[アップロード]ボタンの押下確認
9    if (isset($_POST['_upload'])) {
10    	//ファイルをテンポラリから保存場所へ移動（但し本来は渡されたファイル名をそのまま使うのは危険）
11    	$filename = './'.$_FILES['file']['name'];
12    	if (move_uploaded_file($_FILES['file']['tmp_name'], $filename)) {
13    		echo 'アップロード完了しました';
14        echo $_FILES['file']['name'].'[ファイル名]';
15        echo $_FILES['file']['size'].'[サイズ]';
16    	} else {
17    		//エラー処理
18    	}
19    }
20    ?>

試したこと

まずアップデートボタンを押下した際にボタンが押せなくなるようなコードを探しましたがうまくいきませんでした

php
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
7<script src="jquery.blockUI.js"></script>
8
9
10
11  </head>
12  <body>
13    <script>
14$(function(){
15    $('#foo').click(function(){
16        $.blockUI();
17        $.ajax({
18            url: "foo.cgi",
19        }).done(function() {
20            // ...
21        }).always(function() {
22            $.unblockUI();
23        });
24    });
25});
26</script>
27
28
29    <h1>アップロード処理のサンプル</h1>
30    <form enctype="multipart/form-data" id="form01"method="post">
31    <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
32    <input name="file" type="file">
33    <button type="submit" name="_upload" id="foo"
34    value="アップロード"></button>
35
36
37  </form>
38
39
40    <?php
41    //[アップロード]ボタンの押下確認
42    if (isset($_POST['_upload'])) {
43    	//ファイルをテンポラリから保存場所へ移動（但し本来は渡されたファイル名をそのまま使うのは危険）
44    	$filename = './'.$_FILES['file']['name'];
45    	if (move_uploaded_file($_FILES['file']['tmp_name'], $filename)) {
46    		echo 'アップロード完了しました';
47        echo $_FILES['file']['name'].'[ファイルのなまえ]';
48        echo $_FILES['file']['size'].'[サイズの大きさ]';
49    	} else {
50    		//エラー処理
51    	}
52    }
53    ?>
54
55  </body>
56</html>
57
58コード
59現在こんな感じです。もちろん動きませんが

補足情報（FW/ツールのバージョンなど）

m.ts10806

2019/10/10 06:00

調べたこと試したことを記載してください

m.ts10806

2019/10/10 06:11

細かくて申し訳ないですが、補足情報は環境情報などが載るもので個人的な事情やお願いを書く場所ではない認識です。「初心者」を伝えたいのでしたら質問に「初心者アイコン」をつけるだけで充分かと思います。

kyoya0819

2019/10/10 06:12

> 初心者なのでやさしくしてください知らんがな

watosonn12345

2019/10/11 02:46

ごめんなさい

m.ts10806

2019/10/11 02:48

asuchi0819さんの「知らんがな」は私の指摘に置き換えられるものです。(質問内容は要件のみあるものとすると私の指摘も「知らんがな」とイコールです) 当該文言を削除し環境情報を追記し、初心者アイコンつけてください

watosonn12345

2019/10/11 03:08

いろいろ修正しました。ご指摘感謝します

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

回答2件

ベストアンサー

formのsubmitを絡める以上はaction先に送信しますので、いわゆる画面遷移がおこります

Ajaxによる非同期アップロードをしてはどうでしょうか。
レスポンスが返ってくるまでJavaScriptで画面上に「アップロード中」と表示をしておけばそれっぽくはなります。
※それなりのサイズでなければ一瞬で終わります。fadeIn()→fadeOut()を利用することで若干見せる時間は延ばせますが

また「今何%」も出したいのであれば、jQueryのファイルアップロードのプラグインが幾つかあるのでそちらを使う手もあります。

ちなみに。

アップデートボタンを押下した際にボタンが押せなくなるようなコードを探しました

submitした時点で送信されますし、押したあとに非活性にしても効果はありません。
PHPでechoされたものは画面が表示されるときに一緒に出力しますので、本当にアップロード中に「アップロード中」と出すことはできません。
その文言が出たときにはアップロード終わってます。簡易二重サブミット対策で入れるのは構わないと思いますけどね。

なので、form送信ではなくAjaxで非同期で情報をサーバーに送信する方法が適当だと思います。

投稿2019/10/10 06:22

編集2020/01/16 12:29

m.ts10806

総合スコア80850

watosonn12345

2019/10/11 02:43

ありがとうございます。ajaxというのを調べてみます。ありがとうございます

m.ts10806

2019/10/24 05:57

ちょっと時間がたってしまったあとでなんの前触れもなく解決済みとされたようなので戸惑っています。結局どのようにして解決とされたのでしょうか

watosonn12345

2019/10/24 06:02

上司が指示したことを忘れたみたいなので

m.ts10806

2019/10/24 06:04

は？

watosonn12345

2019/10/24 06:05

怒らないでください

m.ts10806

2019/10/24 06:11

「ajaxというものを調べてみます」のあと何もなくいきなり解決にされたので聞いたら「上司が指示内容を忘れた」とか、会話が成り立ってませんよ。同じことされたらどう思いますか？それに、解決してないなら解決済みにしないでください。あと、業務に直接関係することだとすると、あなたの質問の仕方や内容だとほとんど自身の力でやっていないことになるので、会社はあなたに不当な報酬を支払っていることにもなり得ます。ご注意を。