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);

它有成功参数，但 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() 函数中设置：

sourceForm = source_form;

因此，一旦用户点击 Upload，我们将通过 sourceForm 变量引用他们正在使用的表单。然后在 stopUpload() 中，您只需使用新的 sourceForm 变量来更新可见性并设置返回消息。

作为旁注，您应该真正考虑使用jQuery ajax()。使用 iframe 从 PHP 文件运行 JavaScript 似乎有点困难和麻烦。ajax() 方法要简单得多。

于 2012-04-08T02:13:08.447 回答