質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.65%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 607

前提・実現したいこと

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

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

エラーメッセージ

該当のソースコード

<form enctype="multipart/form-data" method="post">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
    <input name="file" type="file">
    <input type="submit" name="_upload" value="アップロード">
    </form>

    <?php
    //[アップロード]ボタンの押下確認
    if (isset($_POST['_upload'])) {
        //ファイルをテンポラリから保存場所へ移動(但し本来は渡されたファイル名をそのまま使うのは危険)
        $filename = './'.$_FILES['file']['name'];
        if (move_uploaded_file($_FILES['file']['tmp_name'], $filename)) {
            echo 'アップロード完了しました';
        echo $_FILES['file']['name'].'[ファイル名]';
        echo $_FILES['file']['size'].'[サイズ]';
        } else {
            //エラー処理
        }
    }
    ?>

試したこと

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.blockUI.js"></script>



  </head>
  <body>
    <script>
$(function(){
    $('#foo').click(function(){
        $.blockUI();
        $.ajax({
            url: "foo.cgi",
        }).done(function() {
            // ...
        }).always(function() {
            $.unblockUI();
        });
    });
});
</script>


    <h1>アップロード処理のサンプル</h1>
    <form enctype="multipart/form-data" id="form01"method="post">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
    <input name="file" type="file">
    <button type="submit" name="_upload" id="foo"
    value="アップロード"></button>


  </form>


    <?php
    //[アップロード]ボタンの押下確認
    if (isset($_POST['_upload'])) {
        //ファイルをテンポラリから保存場所へ移動(但し本来は渡されたファイル名をそのまま使うのは危険)
        $filename = './'.$_FILES['file']['name'];
        if (move_uploaded_file($_FILES['file']['tmp_name'], $filename)) {
            echo 'アップロード完了しました';
        echo $_FILES['file']['name'].'[ファイルのなまえ]';
        echo $_FILES['file']['size'].'[サイズの大きさ]';
        } else {
            //エラー処理
        }
    }
    ?>

  </body>
</html>

コード
現在こんな感じです。もちろん動きませんが

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/10/11 11:48

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

    キャンセル

  • watosonn12345

    2019/10/11 12:08

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

    キャンセル

  • 退会済みユーザー

    2019/10/30 22:02

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

checkベストアンサー

+5

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

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

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

ちなみに。

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/25 12:42

    すみません、許してください;;

    キャンセル

  • 2019/10/25 13:01

    謝る先を間違えています。

    キャンセル

  • 2020/01/16 21:30

    3ヶ月も前の回答に急についた低評価。なんだろう。気になる。

    キャンセル

+1

onsubmit処理で画面になんらかのマスクをかければよいのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる