提出フォームの進捗バー（$ _SERVER ["PHP_SELF"]）

提出されているフォームの進行状況を視覚化するプログレスバーを作成する方法を探しています。今では、AJAX/jQueryを介してデータが解析されている別のPHPファイルにデータが送信されている記事がたくさんあります。

しかし、フォームのアクション属性が$ _SERVER ["PHP_SELF"]で、データが同じファイル内のPHPで処理されている場合はどうすればよいですか？（送信ボタンは、ページの更新を押した後。）

例：

<?php 
if(isset($_POST['submit']) && !empty($_POST['submit'])){ 
    // some validation code combined with error_message array here 
    // uploading data to server and database here 
} 
?> 

... 

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" id="aaa" enctype="multipart/form-data"> 
    <input type="text" name="title" id="title" size="55" maxlength="55" required> 
    <textarea name="description" id="description" maxlength="155" rows="3" cols="55" required></textarea> 
    <input type="file" name="images[]" id="file_input"> 
    <input type="file" name="images[]" id="file_input"> 
    <input type="file" name="images[]" id="file_input"> 
    <input type="submit" value="Submit" name="submit" id="submit"> 
</form>

出典

2016-08-03 Thoaren

AJAXとXHRオブジェクトを使用する必要があります。 URLを送信している場所は関係ありません:)。フォームファイアウォール成功イベントの後に手動でリフレッシュを開始できます。 –

'$ _SERVER [" PHP_SELF "]'メソッドは現在のページをポストデータでリロードします。 ajaxを使用してデータを送信するために、別のエンドポイントを作成する必要があります。一方、あなたのデータはロード中です。あなたは進行状況バーを表示することができます。 –

上記の2つのコメントは間違っています。 ajaxなしでこれを行うにはいくつかの厄介な方法がありますが、Ajaxファイルのアップロードが広くサポートされるまでの間に行われた古いハックです。すべてはまだ何らかの形でjavascriptの使用を必要としています - 古代のブラウザをサポートしていますか？もしそうでなければ、AJAXファイルのアップロードはこれまでのところ最高の解決策です。 – Steve

は提出PHPページ上の他のページに

$('#loading_spinner').show(); 

    $.post('php_page.php', 
{pickup:pickup,dropoff:dropoff,km:km},function(data){ 
     $('#fare').html(data); 
     $('#loading_spinner').hide(); 
    });

をPHPスクリプトを呼び出すために、このAjaxの機能を使用します運賃計算書でフォームを作成して返却します

セット#loadingspinner css to

#loading_spinner { display:none; }

ボタンこの

onclick="javaScriptFunction();"

を使用しjavaScriptFunction（）

これはあるにそのAjaxの部分を使用提出上のスピナー

<img id="loading_spinner" src="ajax-loader.gif">

を表示するimgタグ内の任意のGIFイメージを使用Googleマップの2点間のKMを計算する例

出典

2016-08-16 11:47:47

提出フォームの進捗バー（$ _SERVER ["PHP_SELF"]）

答えて

関連する問題