Загрузить индикатор выполнения в данных формы

Question

Я пытаюсь создать индикатор загрузки с помощью PHP и jQuery.Тем не менее, у меня есть проблема, когда я довожу его до формы данных.Код выглядит примерно так:

<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">

Suburb:<input type="text" name="txtSuburb" id="txtSuburb">

Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>

<input type="submit" name="DataSubmit" value="Submit Data"/> 
</form>

Как видите, я получил 2 кнопки отправки.Если я сохраню форму как эта, то форма не сможет отправить данные на сервер.Он просто отправляет файл в iFrame.Если я изменю действие и цель формы, функция загрузки не будет работать.

Может ли кто-нибудь помочь мне найти решение для этого?

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

Answer 1

Убедитесь, что в вашей форме есть только один input элемент типа submit.

Если вы хотите, чтобы первая кнопка вызывала какой-то Javascript, используйте обычный элемент ввода или даже стилизованную ссылкуи присоедините событие Javascript к его событию onclick, затем предотвратите его поведение по умолчанию, например, вернув false.Таким образом, только вторая кнопка на самом деле отправит вашу форму, которая должна делать то, что вы описываете.

В общем, я бы поддержал предложение @ Treffynnon использовать для этой цели существующую библиотеку.Эти хаки имеют тенденцию становиться довольно неприятными, особенно когда дело доходит до кроссбраузерной совместимости.