它不會停止上傳文件

Question

我有一個應用程序，您可以在此處訪問。 如果您打開應用程序，請點擊“添加”按鈕幾次。 這將在下表中添加一個新行。 在每個表格行中都有一個 AJAX 文件上傳器。

我遇到的問題是，如果您單擊“上傳”按鈕，它會顯示一個加載欄，但問題是加載欄不會消失 go。 假設發生的是用戶單擊“上傳”，然后它將再次顯示文件輸入和上面帶有消息的按鈕，說明文件是否已成功加載？

為什么加載欄永遠不會停止加載，我該如何解決這個問題？

下面是每行附加的文件輸入代碼和假設開始和停止上傳的 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>

Answer 1

您的 upload.php 文件未傳入 stopUpload() function 的 source_form 參數。這是您的 PHP 文件返回的內容：

window.top.window.stopUpload(0);

它有成功參數，但沒有 source_form 參數。 所以 stopUpload() 中的這三行代碼將無法正常工作，因為 source_form 將是未定義的：

$(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() function 中設置：

sourceForm = source_form;

因此，一旦用戶點擊上傳，我們就會通過 sourceForm 變量獲得對他們正在使用的表單的引用。 然后在 stopUpload() 中，您只需使用新的 sourceForm 變量來更新可見性並設置返回消息。

作為旁注，您真的應該考慮使用jQuery ajax() 。 使用 iframe 從您的 PHP 文件運行 JavaScript 似乎有點困難和麻煩。 ajax() 方法要簡單得多。