HTML提交后jQuery表单触发器动作

我试图在文件上传到服务器时显示加载gif。使用webpy后端，我能够成功上传文件等，但遇到问题让我的jQuery认识到按钮被点击。HTML提交后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>

来源

2015-02-09 1ifbyLAN2ifbyC

上传是使用Ajax还是经典的提交表单？ – GeekRiky 2015-02-09 18:03:12

很明显是经典的提交 – 2015-02-09 18:03:32

其使用经典的html提交 – 1ifbyLAN2ifbyC 2015-02-09 18:09:35

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

编辑：刚才经过一番思考。你明白，这种方法你正在服用可能影响非常小的文件大小正确？这就是如果文件上传得太快。你不会看到图像。

来源

2015-02-09 18:16:07

这是我会做什么：

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

来源

2015-02-09 18:10:55

HTML提交后jQuery表单触发器动作

回答

相关问题