Question

我正在尝试在将文件上传到服务器时显示加载gif。使用webpy后端，我能够成功上传文件等，但是在让我的jQuery识别按钮被点击时遇到了问题。

<html>

<head>

    <script type="text/javascript" src="/static/jquery.js"></script>

</head>

<div id="form_wrapper">
    <script type="text/javascript">
    jQuery(document).ready(function)(){
    jQuery('#sub').click(function(){
        jQuery('#gifdiv').show();
        jQuery('#form').hide();
    });
});
    </script>

<div id="gifdiv" style="display: none">

    <img src="/static/some.gif" style="display: auto;" id="loading">

</div>

<div id="form" style:"display: auto">
    <form action="/" method="POST" enctype="multipart/form-data" id="myform">

        <input type="file" name="file">
        <br>
        <input class="button" type="submit" id="sub">

    </form>

</div>
</div>

</html>

Answer 1

这就是我要做的事情：

<强> HTML：

 <form action="/" method="POST" enctype="multipart/form-data" id="myform">

        <input type="file" name="file">
        <br>
        <button class="button" id="sub">Submit</button>
</form>

<强>使用Javascript：

 jQuery(document).ready(function)(){
    jQuery('#sub').click(function(){
        jQuery('#gifdiv').show();
        jQuery('#myForm').submit();
        jQuery('#form').hide();
    });
});

Answer 2

HTML：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<div id="gifdiv">
    <img src="http://wallpoper.com/images/00/41/28/09/loading_00412809.jpg" style="display: auto;" id="loading">
</div>

<div id="form" style:"display: auto">
    <form action="/" method="POST" enctype="multipart/form-data" id="myform">

        <input type="file" name="file">
        <br>
        <input class="button" type="submit" id="sub">

    </form>

</div>

的CSS：

#gifdiv{
  display: none; 
  width:100px; 
  height:100px; 
  background-color: red;
}

JS：

$(document).ready(function(){
  $('#sub').click(function(evt){
    $('#gifdiv').show();
    $('#form').hide();


    //These 2 lines are there to stop the form from submitting.
    //for debugging only, so that you can see the hide/show
    evt.preventDefault();
    evt.stopPropagation();
  });
});

codepen link：http://codepen.io/anon/pen/OPOYmw

编辑：只是一些想法..你明白你采取的这种方法可能会受到极小文件大小的影响吗？也就是说，如果文件上传速度太快。你不会看到图像。

HTML提交后的jQuery表单触发器操作

2 个答案: