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表單觸發器動作

回答

相關問題