HTML提交后的jQuery表单触发动作答案

【问题标题】：jQuery form trigger action after HTML submitHTML提交后的jQuery表单触发动作
【发布时间】：2015-02-09 17:53:49
【问题描述】：

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

【问题讨论】：

上传是用Ajax还是经典提交表单？
很明显是经典的提交
它使用经典的html提交

标签： jquery html web.py jquery-events

【解决方案1】：

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 链接：http://codepen.io/anon/pen/OPOYmw

编辑：经过深思熟虑.. 您知道您采用的这种方法可能会受到极小的文件大小的影响，对吧？也就是说，如果文件上传得太快。你不会看到图像。

【讨论】：

【解决方案2】：

这就是我会做的：

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

【讨论】：