jQuery form trigger action после отправки HTML

Я пытаюсь отобразить gif загрузки, пока файл загружается на сервер. Используя web-сервер, я могу успешно загружать файл и т. Д., Но у меня возникают проблемы с получением моего jQuery, чтобы узнать, что нажата кнопка.jQuery form trigger action после отправки HTML

<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

довольно очевидный классический submit –

его использование классического html submit – 1ifbyLAN2ifbyC

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

ЯШ:

$(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

Edit: Просто некоторые мысли после того, как .. Вы понимаете, что такой подход вы принимаете, может быть затронуты крайне маленькие размеры файлов? То есть, если файл загружается слишком быстро. вы не увидите изображение.

источник

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

ответ

Смежные вопросы