我有一个应用程序,您可以访问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>
答案 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()方法非常简单。