загрузка изображения после нажатия на файл

Question

Я разрешаю зарегистрированным пользователям отправлять изображения на сервер. Проблема здесь в том, что, если размер изображения слишком велик или интернет-соединение пользователя медленное (многие люди все еще используют дозвон здесь), потребуется некоторое время, прежде чем его отправят. И некоторые пользователи продолжают нажимать кнопку отправки, пока изображение находится в процессе загрузки. На одном веб-сайте я увидел, что как только пользователь нажимает кнопку «Отправить», форма исчезает и появляется изображение загрузки. Как я могу сделать это с помощью jquery?

<form method="POST" ENCtype="multipart/form-data" action="imageupload.asp?Process=Add"> 
<p align="center"><b>--- Upload Image ---</b><br> 
<input type="FILE" size="23" name="FILE"> 
<input type=submit value="Upload"> 
</p> 
</form> 

Answer 1

просто добавьте обработчик события отправки в форму

например. как то так

$('form').submit(function(){
  $(this).hide();
  $('#loadingimage').show();
});

где loadingimage - это элемент с идентификатором loadingimage, который по умолчанию скрыт.

Answer 2

Это должно сделать что-то похожее - когда пользователь нажимает кнопку загрузки, вся форма загрузки скрывается (ввод файла и кнопка), и вместо этого на его месте отображается ожидающее изображение. Конечно, вы можете сделать еще многое - модальное диалоговое окно с сообщением «Пожалуйста, подождите», вы можете просто отключить кнопку загрузки, чтобы пользователи не могли щелкнуть ее во время загрузки и т. Д.

<form method="POST" ENCtype="multipart/form-data" action="imageupload.asp?Process=Add" id="uploadForm"> 
    <p align="center" id='uploadPanel'>
        <b>--- Upload Image ---</b><br> 
        <input type="FILE" size="23" name="FILE"> 
        <input type=submit value="Upload"> 
    </p>
    <p style='display:none' id='waitPanel'>
        <img src='wait.gif' title='Please Wait' />
    </p>
</form>

<script type='text/javascript'>
    $(document).ready(function() {
        $("#uploadForm").submit(function() {
            $("#uploadPanel").toggle();
            $("#waitPanel").toggle();
        });
    });
</script>

Answer 3

$('#imageform').submit(function () {
     $('#loader').show();
     $(this).hide();
});

Что это делает:

1. Найдите форму с id=imageform. (Вы можете сделать свое так)
2. Показать загрузчик. Вы предварительно загрузили его с помощью style="display: none;", чтобы скрыть его до необходимости.
3. Вы скрываете форму, чтобы пользователь больше не нажимал кнопку отправки. Отключение кнопки - это еще один вариант.

Answer 4

Я бы сказал, посмотрите на uploadify , в нем есть функции, которые должны сделать вашу жизнь проще

Взято из их примера кода:

<input id="fileInput" name="fileInput" type="file" />
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader'  : 'uploadify.swf',
'script'    : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
// ]]></script>

Демоверсия очень хорошо объясняет, что она делает.