它不会停止上传文件

时间:2012-04-08 01:55:02

标签: php javascript jquery html file

我有一个应用程序,您可以访问here。如果您打开该应用程序,请单击“添加”按钮几次。这将在下面的表格中添加一个新行。在每个表行中都有一个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>

1 个答案:

答案 0 :(得分: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;

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

作为旁注,您应该真正考虑使用jQuery ajax()。使用iframe从PHP文件运行JavaScript似乎有点困难和繁琐。 ajax()方法非常简单。