HTML提交后的jQuery表单触发操作_Jquery_Html_Web.py_Jquery Events

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

jquery html

HTML提交后的jQuery表单触发操作,jquery,html,web.py,jquery-events,Jquery,Html,Web.py,Jquery Events,我试图在文件上载到服务器时显示正在加载的gif。使用webpy后端，我能够成功地上传文件等。但是我在让我的jQuery识别按钮被点击时遇到了问题 <html> <head> <script type="text/javascript" src="/static/jquery.js"></script> </head> <div id="form_wrapper"> <script type="t

我试图在文件上载到服务器时显示正在加载的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>


jQuery（文档）.ready（函数）（）{
jQuery（'#sub'）。单击（函数（）{
jQuery（'#gifdiv'）.show（）；
jQuery（'#form'）.hide（）；
});
});

这就是我要做的：

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>

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

Html:

js:

代码笔链接：

编辑：只是想了想。。您知道您正在采取的这种方法可能会受到非常小的文件大小的影响，对吗？也就是说，如果文件上传得太快。您将看不到图像。

上载是使用Ajax或经典提交表单的？很明显，经典提交使用经典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>

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

$(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();
  });
});