GIFアップロードの進行状況を背景にスクリプトを実行

Question

私のウェブサイトにこの効果が欲しいです。

メインページに画像のリンクが表示されます。画像をクリックすると、画像が隠され、GIFローディングバーが表示されます。私はそれを本物のローディングバーにしたくないだけで、そこでGIFファイルを配置したいと思っています。スクリプトを実行した後は、gifイメージを非表示にして、成功メッセージを表示する必要があります。

私は写真をアップロードしていません.GIFイメージが表示されている間にPHPスクリプトを実行したいだけです。だから私はいくつかの記事を参照してくださいしないでください。私はすでにたくさん検索しました。 助けてください

Answer 1

jQueryライブラリには、目的を達成するための大きな助けとなるいくつかの機能があります。 jQueryがなければ、これを行うことはできますが、jQueryはプロセスを単純化します。

私が自分のコードで使っているのと似た例です。ここで、Script.phpはサーバー上のスクリプトを参照し、original.gifはページ上のイメージを参照し、loading.gifは 'ローディングバー' gifイメージを参照します。

このコードを使用するには、jQueryライブラリをページに読み込む必要があります。

$(document).ready(function() { 
    $('#gifImage').click(gifImage_click); 
    // Here, gifImage is the ID of the image you want to replace with a loading gif. 
}); 

function gifImage_click() { 
    // This will replace the gif image. 
    $('#gifImage').attr('src','loading.gif'); 

    function successFunction(response) { 
     // This function executes when the script runs successfully. 
     $('#gifImage').attr('src','original.gif'); 
     alert('script completed successfully'); 
    } 

    function errorFunction(xhr) { 
     // This function executes when the script fails to execute. 
     $('#gifImage').attr('src','original.gif'); 
     alert('script execution failed'); 
    } 

    $.ajax({ 
     type: "POST", 
     url: "Script.php", 
     success: successFunction, 
     error: errorFunction 
    }); // end - $.ajax 
}