0

ここからアクセスできるアプリケーションがあります。アプリケーションを開いたら、「追加」ボタンを数回クリックしてください。これにより、下のテーブルに新しい行が追加されます。各テーブル行には、AJAXファイルアップローダーがあります。

私が抱えている問題は、「アップロード」ボタンをクリックすると、ロードバーが表示されますが、問題は、ロードバーが消えないことです。ユーザーが[アップロード]をクリックすると、ファイル入力が再度表示され、ファイルが正常にロードされたかどうかを示す上記のメッセージがボタンに表示されます。

ローディングバーがロードを停止しないのはなぜですか？これを修正するにはどうすればよいですか？

以下は、各行に追加されたファイル入力のコードと、アップロードを開始および停止することを想定しているjavascript関数です。

<script type="text/javascript">


function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 


var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr); 

}

function startUpload(source_form){
  $(source_form).find('.f1_upload_process').css('visibility','visible');
  $(source_form).find('.f1_upload_form').css('visibility','hidden');
      return true;
}

function stopUpload(success, source_form){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(source_form).find('.f1_upload_process').css('visibility','hidden');
      $(source_form).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>');
      $(source_form).find('.f1_upload_form').css('visibility','visible');     
      return true;   
}
</script>
4

1 に答える 1

1

upload.php ファイルが stopUpload() 関数の source_form パラメータを渡していません。これは、PHP ファイルが返すものです。

window.top.window.stopUpload(0);

これには success パラメータがありますが、source_form には何もありません。したがって、source_form が未定義になるため、stopUpload() の次の 3 行のコードは正しく機能しません。

$(source_form).find('.f1_upload_process').css('visibility','hidden');
$(source_form).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>');
$(source_form).find('.f1_upload_form').css('visibility','visible');

うまくいくはずの修正をまとめました：

<script type="text/javascript">
 var sourceForm; 

function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 
    var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='https://helios.hud.ac.uk/u0867587/Mobile_app/Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr);      
}

function startUpload(source_form){
  $(source_form).find('.f1_upload_process').css('visibility','visible');
  $(source_form).find('.f1_upload_form').css('visibility','hidden');
  sourceForm = source_form;
  return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(sourceForm).find('.f1_upload_process').css('visibility','hidden');
      $(sourceForm).find('.f1_upload_form').html(result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>');
      $(sourceForm).find('.f1_upload_form').css('visibility','visible');     
      return true;   
}
</script>

これは、ブロックの一番上に sourceForm という新しいグローバル変数を作成することから始まります。この変数は、ユーザーがアップロード ボタンをクリックしたフォームを格納するために使用され、startUpload() 関数で設定されます。

sourceForm = source_form;

したがって、ユーザーが [アップロード] をクリックするとすぐに、使用しているフォームへの参照が sourceForm 変数を通じて取得されます。次に、stopUpload() で、その新しい sourceForm 変数を使用して可視性を更新し、戻りメッセージを設定します。

補足として、 jQuery ajax()の使用を実際に検討する必要があります。iframe を使用して PHP ファイルから JavaScript を実行するのは、難しく面倒に思えます。ajax() メソッドはとても簡単です。

于 2012-04-08T02:13:08.447 に答える