Отправить файл загрузки / формы на выбор файла

Question

Я хотел бы взять мою форму ниже и как-то настроить ее для отправки формы, когда пользователь выбирает файл. Как я могу это сделать?

<div id=uploadform style="width:500px;margin-left:auto;margin-right:auto;">
    <form enctype="multipart/form-data" action='' method='POST'> 
        <input type="file" name="imagefile" class=browse>
        <input type='submit' value='Upload' class=uploadsubmit onClick="if($('#loading').css('display') == 'none') { $('#loading').show('fast'); $(this).hide('fast'); };">
        <input type='hidden' value='1' name='submitted' /> 
    </form> 
</div>
<div id=loading style="display:none;">
    <img src=uploading.gif>
</div>

Поскольку кнопка будет отсутствовать (в идеале), как я могу показать слой загрузки моего изображения после отправки?

Чтобы уточнить, я хочу, чтобы сама кнопка отправки исчезла, а когда пользователь выбирает файл, отправьте форму и покажите слой #loading.

Answer 1

Вы можете перехватить событие отправки:

$("#uploadform form").submit(function()
{
    $("#uploadform").hide();
    $("#loading").show();
});

Answer 2

Вы можете использовать обработчик события onChange для элемента file, но известно, что у него есть проблемы с несовместимостью с браузером, хотя jquery может решить эту проблему для вас. Затем, конечно, в обработчике событий вы отправляете форму и отображаете диалог загрузки. Если вы хотите избежать обновления страницы, форму необходимо будет отправить в IFrame, иначе ваш диалог загрузки не будет отображаться слишком долго ...:)