Question

我有一个页面，用户可以在其中上传照片。当照片上传到服务器时，我想显示“正在加载...”消息，但是由于某种原因，这不起作用。当用户选择要上传的文件时，该消息会短暂显示，但是在上传照片时，消息会消失。我认为我将代码$('#loading').show();放错了位置。我该如何进行这项工作？非常感谢。

html

 <div class="loading" id="loading">
       <p>Loading...</p>
</div>

jquery

$(document).ready(function() { 
 $('#loading').hide();
//Upload photo

$(".upload-button").on("click", function (e) {

 e.preventDefault();
       $(".file-upload").click();
        $('#loading').show();//show the loader msg
  }); 

  $('#photoimg').on('change', function() {
 $('#loading').hide(); //hide the loader msg

$("#preview").html('');

$("#imageform").ajaxForm({
target: '#preview'

  }).submit();
});

Answer 1

更多的是您的.hide()函数会给您带来问题。它显示正确，但是过早隐藏了。上传照片后，您需要将其隐藏，并使用.ajaxForm选项success来触发回调函数。

最终，您还可以向beforeSubmit添加一个.ajaxForm选项，以最初显示加载程序。

您可以在此处了解更多信息-http://jquery.malsup.com/form/#options-object

$("#imageform").ajaxForm({
    target: '#preview',
    success: hideLoader
  }).submit();
});

function hideLoader() {
   $('#loading').hide();
}

加载程序未按预期显示

1 个答案: