jQuery 提交后 HTML 表单触发操作

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

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

jQuery 提交后 HTML 表单触发操作

jQuery form trigger action after HTML submit

html

jquery

web.py

jquery-events